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

一、申请小程序账号

• 文章
  链接: 《申请小程序账号》
• 步骤

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

二、安装开发工具

• 文章
  链接: 《下载安装微信开发者工具》
• 步骤

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

三、创建、运行项目

通过vue-cli命令行

• 文章
  链接：《创建uni-app（通过vue-cli命令行）》
• 步骤

1. 创建

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

2. 编译

#开发时
npm run dev:mp-weixin

#生产时
npm run build:mp-weixin
1
2
3
4
5

3. 运行
   打开微信开发者工具，导入 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": "分类"
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

五、配置分包

• 文章
  链接：《uni-app配置分包》
• 步骤

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

// pages.json
"subPackages": [
	{
		"root": "subPackageA",
		"pages": [
			{
				"path": "list/list",
				"style": {
					"navigationBarTitleText": "列表"
				}
			}
		]
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

六、发起网络请求

• 文章
  链接：《uni-app发起网络请求》
• 步骤

1. 使用uni-app的API uni.request() 发起网络请求。
   示例：

// 自定义request.js
//1.设置baseURL
const 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// main.js
import '@/utils/request'
1
2

// 组件中
methods: {
	async getDataFn(){
		const res = await uni.$request({
			url: 'home/example', //示例url
			method: 'GET',
			data: {
				text: 'uni.request'
			}
		})
		console.log('后台返回数据', res)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

七、使用组件

自定义组件

• 文章
  链接：《uni-app使用自定义组件》
• 步骤

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

uni-app的组件

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

基础组件

直接使用（不用导入）

扩展组件（uni-ui）

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

导入方法一：npm安装

• 步骤

npm i sass -D
1

npm i sass-loader -D
1

npm i @dcloudio/uni-ui
1

// pages.json中，配置easycom
"easycom": {
	"autoscan": true,
	"custom": {
		// uni-ui 规则如下配置
		"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
	}
}
1
2
3
4
5
6
7
8

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

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

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

八、使用vuex

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

state、getter、mutation、action

• 步骤

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

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: { },
  mutations: { },
  actions: { },
  getters: { }
})
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13

在 main.js 中导入

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

const app = new Vue({
  store,
  ...App
})
app.$mount()
1
2
3
4
5
6
7
8
9
10
11
12

module

• 步骤

1. 配置:
   在 store 目录下新建 modules 文件夹，并在下面新建 xxx.js 文件等用来存放 vuex 的模块；
   在 main.js 中导入；

// main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

const app = new Vue({
  store,
  ...App
})
app.$mount()
1
2
3
4
5
6
7
8
9
10
11
12

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

// store/index.js
import 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

子模块页面内容：

// store/modules/moduleA.js
export 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: {}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

九、发布小程序

• 文章
  链接：《发布uni-app（发布为微信小程序）》
• 步骤

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

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

npm run build:mp-weixin
1

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

（2）方式二：通过HBuilderX
【发行】->【小程序-微信】，编译成功后，自动开启微信开发者工具

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

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