uni-app开发微信小程序_uniapp开发微信小程序

技术框架

编辑器：HubilderX
运行环境：微信开发者工具
技术栈：uni-app + vue + uView + uCharts + LeanCloud

创建微信小程序项目时，我才用了vue前端框架

需求

数据库设计

搭建项目

PS：用的是HbuilderX编辑器

1. 注册微信小程序

注册完后，获取微信小程序的AppID，并在manifest.json文件配置；

2. 导入uView和uCharts组件库

使用uni-app内置的插件市场下载插件到uni.modules中，按照其要求安装

• uView安装
  使用 uni-app 内置的插件配置下载到 uni.modules 中，链接如下：
  https://ext.dcloud.net.cn/plugin?id=1593
  在根目录的 main.js 中引入 uView 主 JS 库，在根目录的 uni.scss 中引入 uView 的全
  局 SCSS 主题文件，即可使用 uView 中的组件。
• uCharts安装
  与uView的导入方式一样，都是使用uni-app内置的插件市场下载插件到uni.modules
  中，即可使用。

导入静态资源

根目录 static 存放静态资源

• font：阿里图标；
• img：图片
• style：初始化的样式，这里我用了ColorUI，有兴趣可以自行了解

路由配置

还可以设置全局样式、配置底部tab栏和设置启动小程序时的启动页面

在根目录 pages.json 配置路由

{
	// 路由菜单
	"pages" : [
		{
            "path" : "pages/list/detail",
            "style" : {
                "navigationBarTitleText" : "清单详情",// 标题
                "enablePullDownRefresh" : false		// 是否下拉刷新
            }
        },
	],
	"globalStyle" : {
		//...
	},
	// 底部tab栏配置
	"tabBar" : {
		"color" : "#797e83",
        "selectedColor" : "#ff5566",
        "list" : [
        	{
			    "text" : "首页",
			    "pagePath" : "pages/index/index",
			    "iconPath" : "static/icon/index.png",
			    "selectedIconPath" : "static/icon/index1.png"
			},
        ]
	},
	"condition" : {
		//模式配置，仅开发期间生效
		"current" : 0, //当前激活的模式(list 的索引项)
		"list" : [
            {
                "name" : "", //模式名称
                "path" : "pages/index/index", //启动页面，设置为首页
                "query" : "" //启动参数，在页面的onLoad函数里面得到
            }
        ]
	}
}
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
31
32
33
34
35
36
37
38
39

引入vuex

由于我比较喜欢vue的开发，比微信小程序的原生语法更高效，我觉得能不能使用vue去开发，所以找到了uni-app，但开发中发现uni-app对vue的高级语法不兼容，这是后话了。

store/index.js

import  Vue  from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
	state: {
		isLogin: false,//用于个人清单页的数据获取
	},
	mutations: {
		set_isLogin(state,isLogin) {
			state.isLogin = isLogin;
			uni.setStorageSync('isLogin', isLogin);
		},
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

封装数据请求

思路：request.js封装uni.request，api.js二次封装request.js导出的get\post\put\delete方法

我这里请求的是LeanCloud云数据库存储，没有服务器和后端，所以需要符合LeanCloud的请求头规范

utils\request.js：
由于不能用axios，所以封装uni-app提供的uni.request，并导出get\post\put\delete方法

let baseUrl = 'https://XXX.com';
		// 数据请求
const $http = function(url,method,data={}) {
		return new Promise((resolve,reject)=>{
			uni.request({
				url: baseUrl+url,
				method,
				data,
				header: {//  请求头符合LeanCloud规范，如果后端的接口有token请求可以自定义
					"X-LC-Id": "6zl0SNVm3IOBBPtEUSXea5su-gzGzoHsz",
					"X-LC-Key": "6QrXp3mYKnT2z7Xb5c3PtGbt",
					"Content-Type": "application/json"
				},
				
				success: (res) => {
					resolve(res);
				},
				fail: (err) => {
					reject('请求失败',err);
				}
			})
		});
}

export const $get = function(url,data={}) {
	return $http(url,'GET',data);
}
export const $post = function(url,data={}) {
	return $http(url,'POST',data);
}
export const $put = function(url,data={}) {
	return $http(url,'PUT',data);
}
export const $delete = function(url,data={}) {
	return $http(url,'DELETE',data);
}
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
31
32
33
34
35
36

utils\api.js:

import { $get,$post,$put,$delete } from "./request.js";

// 获取当前用户的全部个人任务列表
export const $getList = (shortId) =>{
	let url = `/1.1/classes/lists?where={"shortId":"${shortId}"}`;
	return $get(url);
}
1
2
3
4
5
6
7

登陆模块

微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/index.html
以下是微信方制定的开发流程

获取用户微信名和头像

wx.getUserProfile({
  desc: '获取您的头像和昵称',
});
1
2
3

小程序生命周期

• onLoad：初次加载页面只渲染一次
• onShow：页面显示
• onReady：初次加载页面只渲染一次
• onUnload：页面卸载
• onHide：页面隐藏，一般是页面跳转用到

一般在onShow中获取数据

页面跳转

1. 跳转到底部tab栏页面

uni.switchTab({
	url:'../my/my'
})
1
2
3

2. 跳转到除底部tab栏以外的页面（可带参数）

uni.navigateTo({
	url:'./group?objectId='+objectId
})
1
2
3

3. 页面A跳转页面B，从页面B返回页面A时，带返回值并处理返回值

// 页面A
getListId(objectId) {
  uni.navigateTo({
	url:'../list/detail?objectId=' + objectId,
	events:{
		con:　(data)=> {
			// 找出下标,并修改
			// console.log('aaa',this.allList);
			let index = this.allList.findIndex(item=>{
				return item.objectId === data.objectId;
			});
			this.allList.splice(index,1,data);
			this.id = ['收集箱','备忘录','执行清单','等待清单'].indexOf(data.type);
			this.type = data.type;
			console.log('下标',this.id);
		}
	}
},

// 页面B
// 点击修改并跳转，并传参
val_type(obj) {
	// 返回数据给页面A
	const eventChannel = this.getOpenerEventChannel();
	const obj = {...}
	eventChannel.emit('con', obj);
	// 跳转至页面A
	uni.switchTab({
		url:'./list'
	});
	// 或者直接返回到页面A
	uni.navigateBack();
},
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
31
32
33

图表展示

<!-- 图表展示 -->
<view class="charts-box">
    <qiun-data-charts 
      type="pie"
      :opts="opts"
      :chartData="chartData"
      :canvas2d="true"
      canvasId="dYWDFpyAVgAHeyRicapcCxuOtkcwjBZQ"
    />
  </view>
data() {
	return {
		chartData: {},// 图表
		opts: {
	      // color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
	        color: ["#EE6666","#3CA272"],
	        padding: [5,5,5,5],
	        extra: {
	          pie: {
	            activeOpacity: 0.5,
	            activeRadius: 10,
	            offsetAngle: 0,
	            labelWidth: 15,
	            border: true,
	            borderWidth: 3,
	            borderColor: "#FFFFFF",
	            linearType: "custom"
	          }
	        }
	      }
	}	
}

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
31
32
33