这系列的文章用于记录自己的小程序项目经历,以便以后来看
一.项目的主要架构设计
1.编辑器的选择 这个看个人的喜好,官方推荐的是huilbd
2.微信开发者工具 具体设置下文会提到
3.编辑器配置 具体配置下文会提到
4.路由结构的设计 根据tab切换项(个人建议做分包处理)
5.uni组件库的选择 这里我选了uview
6.数据传输 1.vuex(uni是内置的) 2.用缓存 3.组件的传值 4.路由传参
7.封装 1.接口请求的封装 2.公共样式的封装 3.公共api的封装 (如果需要全局记得去main.js中去注册,这边作者用的是vue2.0和js)
二.微信小程序的登录注册的坑
1.登录的授权模块这里最主要就是获取身份信息和手机号
/* 获取手机号的*/
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
/* 获取用户信息的新版本*/
<button v-if="canIGetUserProfile" icon="weixin-fill" open-type="getUserInfo" @click="bindGetUserInfo">微信登录<button>
/*旧版本*/
<button v-else class="login-btn" type="primary" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo">授权登录</button>
这里有几个需要注意的点,用getphonenumber获取的手机号的code在小程序开发者上看不见只有真机调试后才能看见,而且这个open-data近期还在调整附上网址看官网这里我这里是把uni.login获取的code加上getPhoneNumber获取的iv和encryptedData传给后端进行个登录的权限认证具体看你的实际场景而定
2.授权测试的坑,记得把测试的人在微信小程序项目中加入进团队
3.code的获取还需要个进行微信认证,这里具体个方案是可以把你之前授权的微信公众号的将这个小程序加入进去,或者没有的你可以重新进行个微信认证小程序这个也有个入口就是一年200块钱
三.微信小程序的分包问题
由于微信小程序的大小是不能超过2m的所以我们需要做分包处理
"subPackages": [{
"root": "",
"pages": [{
"path": "",
},]
//这里就需要注意路由跳转的路径了