uni-app开发小程序（项目搭建）

目录

• • 一、申请小程序账号
  • 二、安装开发工具
  • 三、创建、运行项目
  • • 通过vue-cli命令行
    • 通过HBuilderX
    • 四、配置tabBar
    • 五、配置分包
    • 六、发起网络请求
    • 七、使用组件
    • • 自定义组件
      • uni-app的组件
      • • 基础组件
        • 扩展组件（uni-ui）
        • • 导入方法一：npm安装
          • 导入方法二：通过uni-modules导入全部组件
          • 八、使用vuex
          • • state、getter、mutation、action
            • module
            • 九、发布小程序

              一、申请小程序账号

              • 文章

                链接: 《申请小程序账号》

              • 步骤
                1. 在微信公众平台，注册小程序账号

                二、安装开发工具

                • 文章

                  链接: 《下载安装微信开发者工具》

                • 步骤
                  1. 在微信官方文档，下载微信开发者工具

                  三、创建、运行项目

                  通过vue-cli命令行

                  • 文章

                    链接：《创建uni-app（通过vue-cli命令行）》

                  • 步骤
                    1. 创建

                    vue create -p dcloudio/uni-preset-vue my-project

                    1. 编译

                    #开发时npm run dev:mp-weixin#生产时npm run build:mp-weixin

                    1. 运行

                       打开微信开发者工具，导入 dist\dev\mp-weixin 运行。（或导入 dist\build\mp-weixin 运行）

                    通过HBuilderX

                    • 文章

                      链接：《创建、运行uni-app（通过HBuilderX）》

                    • 步骤
                      1. 通过HBuilderX可视化界面，新建项目、运行到开发者工具、发行小程序

                      四、配置tabBar

                      • 文章

                        链接：《uni-app配置tabBar》

                      • 步骤
                        1. 在 pages 文件夹中定义页面
                        2. 在 pages.json 文件， tabBar 节点配置

                           示例：

                        // pages.json"tabBar": {"list": [{"pagePath": "pages/home/home","iconPath": "static/icons-首页.png","selectedIconPath": "static/icons-首页-(1).png","text": "首页"},{"pagePath": "pages/classify/classify","iconPath": "static/icons-分类.png","selectedIconPath": "static/icons-分类-(1).png","text": "分类"}]}

                        五、配置分包

                        • 文章

                          链接：《uni-app配置分包》

                        • 步骤
                          1. 自定义分包（如：subPackageA）（和 pages 文件夹同级目录）
                          2. 在 pages.json 文件，subPackages 节点，配置分包

                             示例：

                          // pages.json"subPackages": [{"root": "subPackageA","pages": [{"path": "list/list","style": {"navigationBarTitleText": "列表"}}]}]

                          六、发起网络请求

                          • 文章

                            链接：《uni-app发起网络请求》

                          • 步骤
                            1. 使用uni-app的API uni.request() 发起网络请求。

                               示例：

                            // 自定义request.js//1.设置baseURLconst baseURL = 'https://www.example.com/' //仅为示例，并非真实接口地址 //2.获取token，设置请求头const token = ''if(token){  token.Authorization = token} //3.发起网络请求const request = ({url, method, data,  header}) => {  return new Promise((resolve, reject) => {    uni.request({      url: `${baseURL}${url}`,      method,      data,      header,      success: (res) => {        resolve(res.data)      },      fail: (err) => {        reject(err)      }    })  })} //4.挂载网络请求的方法到全局uni对象uni.$request = request

                            // main.jsimport '@/utils/request'

                            // 组件中methods: {async getDataFn(){const res = await uni.$request({url: 'home/example', //示例urlmethod: 'GET',data: {text: 'uni.request'}})console.log('后台返回数据', res)}}

                            七、使用组件

                            自定义组件

                            • 文章

                              链接：《uni-app使用自定义组件》

                            • 步骤
                              1. 在项目根目录的 components 目录下，组件符合 components/组件名称/组件名称.vue，就可以直接在页面中使用组件（不用引入、注册）

                              uni-app的组件

                              • 文章

                                链接：《使用uni-app的组件（基础组件和扩展组件）》

                                基础组件

                                直接使用（不用导入）

                                扩展组件（uni-ui）

                                将组件导入项目中才可以使用。导入组件：

                                导入方法一：npm安装

                                • 步骤

                                  npm i sass -D

                                  npm i sass-loader -D

                                  npm i @dcloudio/uni-ui

                                  // pages.json中，配置easycom"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-/uni-.vue"}}

                                  //在根目录创建 vue.config.js 文件，并配置:module.exports = {   transpileDependencies: ['@dcloudio/uni-ui']}

                                  导入方法二：通过uni-modules导入全部组件

                                  在DCloud插件市场，下载 uni-ui 并导入HBuilderX

                                  八、使用vuex

                                  • 文章

                                    链接：《uni-app中使用vuex》

                                    state、getter、mutation、action

                                    • 步骤
                                      1. 配置：

                                         在项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下：

                                      // store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: { },  mutations: { },  actions: { },  getters: { }})export default store

                                      在 main.js 中导入

                                      // main.jsimport Vue from 'vue'import App from './App'import store from './store'Vue.prototype.$store = storeconst app = new Vue({  store,  ...App})app.$mount()

                                      module

                                      • 步骤
                                        1. 配置:

                                           在 store 目录下新建 modules 文件夹，并在下面新建 xxx.js 文件等用来存放 vuex 的模块；

                                           在 main.js 中导入；

                                        // main.jsimport Vue from 'vue'import App from './App'import store from './store'Vue.prototype.$store = storeconst app = new Vue({  store,  ...App})app.$mount()

                                        在 store 目录下新建 index.js 文件，作为模块入口，引入各子模块

                                        // store/index.jsimport Vue from 'vue'import Vuex from 'vuex'import moduleA from './modules/moduleA'Vue.use(Vuex)const store = new Vuex.Store({modules: { moduleA },getters: { count: state => state.moduleA.count}})export default store

                                        子模块页面内容：

                                        // store/modules/moduleA.jsexport default {  namespaced: true, // 命名空间    state:{count: 10  },  mutations: {add(state, payload){state.count += payload},addCountMutation(){this.commit('moduleA/add', 1)}  },  actions: {addCountAction(context, payload){context.commit('add', payload)}  },  getters: {}}

                                        九、发布小程序

                                        • 文章

                                          链接：《发布uni-app（发布为微信小程序）》

                                        • 步骤
                                          1. 编译代码，将代码运行到微信开发者工具

                                          （1）方式一：通过vue-cli命令行

                                          npm run build:mp-weixin

                                          打开微信开发者工具，导入 dist/build/mp-weixin 运行

                                          （2）方式二：通过HBuilderX

                                          【发行】->【小程序-微信】，编译成功后，自动开启微信开发者工具

                                          1. 在微信开发者工具，预览、上传代码

                                          2. 在微信公众平台（小程序管理后台），提交审核、发布