uniapp - 小程序

官方文档

申请小程序账户

1.进入小程序注册页

[公众官方平台](https://mp.weixin.qq.com/)

2.注册成功后。可以在 开发 -> 开发管理 ->开发设置 查看 AppID


安装开发工具

进入微信官方平台

[微信小程序官方下载](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html)

选择个人合适系统版本


安装微信开发者工具

双击下载的exe应用程序

点击【下一步】

点击【我接受】

自定义安装目录；

点击完成安装完毕

创建运行项目

通过命令行

[官方文档](https://uniapp.dcloud.net.cn/quickstart-cli.html)

1. 环境安装（先全局安装vue-cli）→ 创建命令

npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project

2. 选择模板
3. cd 项目目录
4. manifest.json文件，“mp-weixin”节点，配置appid
5. 编译

npm run dev:平台值（开发时）

npm run build:平台值（生产时）

6. 如：微信小程序平台，开发时，编译：

npm run dev:mp-weixin

如：微信小程序平台，生产时，编译：

npm run build:mp-weixin

7. 运行

运行方式：

打开 微信开发者工具, 导入 dist\dev\mp-weixin 运行。（npm run dev:mp-weixin）

（或 导入 dist\build\mp-weixin 运行。（npm run build:mp-weixin））

通过HBuilderX

1. 打开HBuilderX → 选择文件 → 新建文件（项目） 2. 选择模板根据（根据项目需要）

![](https://img-blog.csdnimg.cn/img_convert/0e5a769ff20803698cc7e3f477533334.png)

3. 运行提前打开微信开发者工具打开服务端口

配置tabBar

[官方文档](https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar)

1. 在pages文件夹中定义页面

2. 在pages.json文件中的tabBar节点配置

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/tabBar/component/component",  // 地址
				"iconPath": "static/component.png",
				"selectedIconPath": "static/componentHL.png",
				"text": "内置组件"
			},
			{
				"pagePath": "pages/tabBar/API/API",
				"iconPath": "static/api.png",
				"selectedIconPath": "static/apiHL.png",
				"text": "接口"
			}, {
				"pagePath": "pages/tabBar/extUI/extUI",
				"iconPath": "static/extui.png",
				"selectedIconPath": "static/extuiHL.png",
				"text": "扩展组件"
			}, {
				"pagePath": "pages/tabBar/template/template",
				"iconPath": "static/template.png",
				"selectedIconPath": "static/templateHL.png",
				"text": "模板"
			}
		]
	}

发起网络请求

1. 自定义js文件（ 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

2. 全局引入 在main.js下

import App from './App'
import store from './store'
import request from './utils/Api/request.js'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.$store = store
Vue.prototype.$adpid = "1111111111"
Vue.prototype.$backgroundAudioData = {
	playing: false,
	playTime: 0,
	formatedPlayTime: '00:00:00'
}
App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store)
	app.config.globalProperties.$adpid = "1111111111"
	app.config.globalProperties.$backgroundAudioData = {
		playing: false,
		playTime: 0,
		formatedPlayTime: '00:00:00'
	}
	return {
		app
	}
}
// #endif

3. 在组件中使用自定义的uni.$request发起网络请求

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

状态管理

[pinia](https://blog.youkuaiyun.com/weixin_51445493/article/details/134537977?spm=1001.2014.3001.5501)

vuex

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

2. 在 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()

3. module使用
   1. 在 store 目录下新建 modules 文件夹，并在下面新建 xxx.js 文件等用来存放 vuex 的模块；
   2. 在 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

c. <font style="color:rgb(77, 77, 77);">子模块页面内容：</font>

// 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. 管理员审核通过

若需要密钥在微信开发者中心生成