uniapp开发小程序记录一:配置程序

深碍√TFBOYSˉ_ 2021-09-07 16:58 1799阅读 1赞

### 配置程序 ###

*  一、新建项目
 *  二、目录结构
 *  三、项目运行到微信开发者工具
 *  四、配置网络请求
 *   *  1.安装@escook/request-miniprogram
     *  2.配置网络请求
     *  3.发起网络请求
 *  五、配置小程序分包
 *  六、新建组件
 *  七、使用uni提供的组件
 *  八、配置vuex
 *  九、配置mixins
 *  十、uni-app发布小程序
 *  十一、uni-app发布Android App

# 一、新建项目 #

1.文件–新建–项目  
2.选择uni-app  
3.保存到一个英文路径的目录  
4.选择内置uni-ui的项目模板  
5.创建

# 二、目录结构 #

┌─components            uni-app组件目录
    │  └─comp-a.vue         可复用的a组件
    ├─pages                 业务页面文件存放的目录
    │  ├─index
    │  │  └─index.vue       index页面
    │  └─list
    │     └─list.vue        list页面
    ├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
    ├─main.js               Vue初始化入口文件
    ├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
    ├─manifest.json         配置应用名称、appid、logo、版本等打包信息
    └─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

# 三、项目运行到微信开发者工具 #

1.在manifest.json 文件种的微信小程序配置里填写自己的appid  
2.在工具-设置里找到运行配置，在微信开发者路径里填写，自己微信开发者的安装路径  
3.打开自己的微信开发者工具，在设置-安全中打开服务端口  
4.在HBuilderX 中，运行到小程序模拟器 -> 微信开发者工具，即可将当前uni-app项目编译后，自动打开微信开发者工具运行。

# 四、配置网络请求 #

小程序不支持axios,而且原生的wx.request()功能较为简单，不支持拦截器等全局定制的功能。所以使用第三方插件来发起网络请求。

## 1.安装@escook/request-miniprogram ##

先要初始化npm包管理器

npm init -y

然后安装

npm install @escook/request-miniprogram

## 2.配置网络请求 ##

在main.js文件中

//导入网络请求的包
    import {  $http } from '@escook/request-miniprogram'
    //uni是uni-app的顶级对象
    uni.$http= $http;
    //请求的根路径
    $http.baseUrl = 'http://www.uinav.com'
    //请求拦截器
    $http.beforeRequest = function(options){ 
      uni.showLoading({ 
        title:"数据加载中"
      })
    }
    //响应拦截器
    $http.afterRequest = function(){ 
      uni.hideLoading()
    }

## 3.发起网络请求 ##

在某个页面中

const{ data:res}  =   await uni.$http.get('url')

这样即可发送请求。要是微信开发者工具提示非合法域名，可以在详情-本地设置，不校验合法域名。但只限于开发阶段，要解决须在在后台管理设置。

# 五、配置小程序分包 #

1.在项目根文件中，创建一个文件夹用来存放分包，假设名字叫subpkg  
2.在pages.json中，page同级节点，创建subPackages节点

"subPackages":[
      { 
      //root表示根文件是哪个，这里是subpkg文件夹
        "root":"subpkg",
        "pages":[]
      }
    ],

3.在subpkg文件夹上右键，选择新建页面，输入文件夹的名称，选择scss模板选择小程序的分包是刚才创建的subpkg文件夹。这样就能创建一个分包，并且会把路径自动添加到pages.json文件夹中。

# 六、新建组件 #

1.在项目根目录的 components 目录上，鼠标右键，选择 新建组件  
2.选择scss模板,创建同名目录,这里目录名写my-searc  
3.使用:  
再某个页面中

//组件名就是组件文件的名字.直接使用即可
    <my-search></my-search>

# 七、使用uni提供的组件 #

<uni-icons type="search" size="17"></uni-icons>

直接使用即可

# 八、配置vuex #

1.在项目根目录中创建 store 文件夹，专门用来存放 vuex  
2.在 store 目录上鼠标右键，选择 新建 -> js文件，新建 store.js 文件  
3.模板选择default，默认模板  
4.初始化sotre的实例对象

// 1. 导入 Vue 和 Vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    // 2. 将 Vuex 安装为 Vue 的插件
    Vue.use(Vuex)
    
    // 3. 创建 Store 的实例对象
    const store = new Vuex.Store({ 
      // TODO：挂载 store 模块
      modules: { },
    })
    
    // 4. 向外共享 Store 的实例对象
    export default store

5.在main.js导入store实例

// 1. 导入 store 的实例对象
    import store from './store/store.js'
    
    // 省略其它代码...
    
    const app = new Vue({ 
      ...App,
      // 2. 将 store 挂载到 Vue 实例上
      store,
    })
    app.$mount()

6.创建vuex子模块  
7.在 store 目录上鼠标右键，选择 新建 -> js文件，创建一个 store子 模块，命名为 demo.js  
8.模板选择default模板  
9.初始化demo模块

export default { 
      // 为当前模块开启命名空间
      namespaced: true,
    
      // 模块的 state 数据
      state: () => ({ 
      //数据
        count: [],
      }),
    
      // 模块的 mutations 方法
      mutations: { },
    
      // 模块的 getters 属性
      getters: { },
    }

10.在store/store.js 模块中，导入并挂载demo vuex 模块

import Vue from 'vue'
    import Vuex from 'vuex'
    // 1. 导入demo的 vuex 模块
    import demofrom './demo.js'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({ 
      // TODO：挂载 demo模块
      modules: { 
        // 2. 挂载demo的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
        // demo模块中 count数组的访问路径是 m_demo/count
        m_cart: moduleCart,
      },
    })
    
    export default store

11.在某个页面中使用store中的数据

// 从 vuex 中按需导出 mapState 辅助方法
    import {  mapState } from 'vuex'
    
    export default { 
      computed: { 
        // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
        // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
        ...mapState('m_demo', ['count']),
      },
      // 省略其它代码...
    }

注意：今后无论映射 mutations 方法，还是 getters 属性，还是 state 中的数据，都需要指定模块的名称，才能进行映射。

12.在页面渲染时，可以直接使用映射过来的数据，例如

<view class="yf"> { { demo.length}}</view>

13.在demo.js模块中，定义一个mutations 方法

export default { 
      // 为当前模块开启命名空间
      namespaced: true,
    
      // 模块的 state 数据
      state: () => ({ 
    
        count: [],
      }),
    
      // 模块的 mutations 方法
      mutations: { 
        addToCount(state, step) { 
            state.count.push(step?step:1)
            //要是存在
              // 通过 commit 方法，调用 m_demo 命名空间下的 saveToStorage 方法
       this.commit('m_demo/saveToStorage')
      },
      saveToStorage(){ 
      console.log('调用了')
    }
      },
      
    
      // 模块的 getters 属性
      getters: { },
    }

14.在某页面中使用mutations方法

// 按需导入 mapMutations 这个辅助方法
    import {  mapMutations } from 'vuex'
    
    export default { 
      methods: { 
        // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
        ...mapMutations('m_demo', ['addToCount']),
        //使用时直接this.addToCount
      },
    }

14.在demo.js定义getters方法

// 模块的 getters 属性
    getters: { 
      
       total(state) { 
          const c = state.count.length
          return c
       }
    }

15.某页面中使用

// 按需导入 mapGetters 这个辅助方法
    import {  mapGetters } from 'vuex'
    
    export default { 
      computed: { 
        ...mapGetters('m_demo', ['total']),
        //使用时，直接是this.total
      },
    }

# 九、配置mixins #

1.在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 usedemo.js  
2.初始化usedemo文件

import {  mapGetters } from 'vuex'
    
    // 导出一个 mixin 对象
    export default { 
      computed: { 
        ...mapGetters('m_demo', ['total']),
      },
      onShow() { 
        // 在页面刚展示的时候调用
        this.setBadge()
      },
      methods: { 
        setBadge() { 
        console.log(this.total)
        
           
        },
      },
    }

3.使用mixins

// 导入自己封装的 mixin 模块
    import usedemo from '@/mixins/usedemo.js'
    
    export default { 
      // 将 usedemo混入到当前的页面中进行使用，在页面加载时，会自动调用usedemo文件里的代码，相当于对当前页面vue实例的补充。
      mixins: [usedemo],
      // 省略其它代码...
    }

# 十、uni-app发布小程序 #

1.小程序只有发布后,才能被用户搜索使用  
2.开发期间的小程序为了调试,是没有压缩的,不适合直接上线  
3.通过小程序的发布能优化小程序的体积,优化小程序,  
4.点击HBuilderX 菜单栏上的 发行 -> 小程序-微信(仅适用于uni-app)  
5.在弹出框中填写要发布的小程序的名称和AppId之后，点击发行按钮  
6.发布编译完成之后，会自动打开一个新的微信开发者工具界面，此时，点击工具栏上的上传按钮  
7.填写版本号和项目备注之后，点击上传按钮  
8.上传完成之后，会出现提示消息，直接点击确定按钮即可  
9.通过微信开发者工具上传的代码，默认处于版本管理的开发版本列表中  
10.将 开发版本提交审核 -> 再将 审核通过的版本发布上线，即可实现小程序的发布和上线

# 十一、uni-app发布Android App #

1.点击 HBuilderX 状态栏左侧的未登录按钮，弹出登录的对话框  
2.在弹出的登录对话框中，填写账号和密码之后，点击登录即可  
3.打开项目根目录中的 manifest.json 配置文件，在基础配置面板中，获取uni-app 应用标识，并填写应用名称  
4.切换到 App 图标配置面板，点击浏览按钮，选择合适的图片之后，再点击自动生成所有图标并替换即可  
5.点击菜单栏上的 发行 -> 原生 App-云打包  
6.勾选打包配置:android(apk包)->使用公共测试证书->打正式包->打包即可  
7.点击链接下载 apk 的安装包，并安装到 Android 手机中查看打包的效果。