微信小程序入门
微信小程序入门
简介
微信小程序本质是Web APP,使用它可以用较低的开发成本获得近似APP的体验。这里有一个微信小程序原生开发的快速入门教程:28节课快速玩转微信小程序【黑马程序员】
小程序里面的app.json文件是全局配置文件。
做小程序查官方官方文档是一个重要技能,它可以帮助使用基础组件:小程序官方文档
微信小程序开发框架
因为微信的原生开发体验太差,但是微信小程序的存在又有一定的必要性,所以市面上出现了不少第三方的微信小程序开发框架。下面的文章也基本是围绕着这些第三方框架展开的,框架包括但不限于:mpvue(美团出品)、mpvue-weui(基于mpvue的个人开发者封装)、wepy(微信出品)。
mpvue
视频教程:尚硅谷小程序框架mpvue核心技术
mpvue的生命周期是要熟悉的,有助于对mpvue的逻辑流程了解和应用(生命周期函数的含义介绍):
mpvue是美团工程师推出的基于Vue.js封装的用于开发小程序的框架,它融合了原生小程序和Vue.js的特点,可完全组件化开发。
用npm install运行生成node_modules后才能使用npm run dev命令在开发环境下运行。
首先是mpvue,先来个demo增强信息和认知:使用mpvue开发小程序教程(一)
使用mpvue,需要使用两个工具:“Webstorm”和“微信开发者工具”。使用前者进行程序的开发,使用后者进行程序的运行调试。
修改对接的后端地址:找到根目录中的config,找到dev.env.js,修改里面的HOME_URL地址即可。
视频教程:尚硅谷小程序框架mpvue核心技术
下拉加载和上拉加载
资料:mpvue开发小程序下拉刷新、上拉加载 - 代码汇博客、js数组合并(一个数组添加到另一个数组里面)方法
mpvue
中兼容了小程序的生命周期
,可直接使用下面的事件。
下拉刷新事件
onPullDownRefresh () { console.log('下拉刷新')}
上拉触底事件
onReachBottom () { console.log('触底了')}
加载的数据使用数组存起来,上拉增加数据时通过concat()来累加数组数据,注意:concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
将mpvue导入微信开发者工具无法导入的解决方法
在微信开发者工具中需要 npm run build 导入dist文件目录下的wx文件夹,然后npm run dev 就可以热更新开发项目了。需要注意的是,导入的时候,选择dist下的wx文件夹,如果直接导入项目根目录,很可能是无法导入的。
input标签
mpvue 微信小程序input点击键盘 搜索 触发confirm事件
调试
使用debugger命令,在script中运行代码时插入,通过查看运行过程中的变量变化来调试,可以加快调试和开发效率。
mpvue-weui
我的需求主要是使用基于mpvue的mpvue-weui来写微信小程序,所以下面着重讲解一下mpvue-weui关于微信小程序的开发。首先给出mpvue-weui的介绍网址:[mpvue-weui 1.0https://kuangpf.com/mpvue-weui/#/)
Mpvue-WeUI是基于 mpvue框架,同微信原生视觉体验一致的基础样式库,为微信小程序量身设计,令用户的使用感知更加统一。
HTTP请求解决方案
小程序需要和服务器的端口对接,就需要通过http接口,为此就需要相应的对接工具。
Fly.js
Fly.js是一个基于 promise 的,轻量且强大的Javascript http 网络库。Flyio官方帮助文档:Flyio官方帮助文档
Axios
我也没用过Axios,只知道它是Fly.js的前辈,这两者之间的对比详情见文章:fly.js vs axios
其它问题
- 微信小程序图表组件 wx-f2
- 【微信小程序】合法域名校验出错,不在以下合法域名列表中 解决方法
- created()函数和methods以及data()同级,不要将其放在methods内,否则会导致其失效。
- 在template中使用{{this.data}}是无法在前端显示数据的,要显示数据必须写{{data}}
- MPVUE 开发微信小程序 textarea v-model 绑定不了数据
- 定时器
- CountDown 倒计时
页面跳转
- redirectTo:关闭当前页,跳转到指定页;
- navigateTo:保留当前页,跳转到指定页;
- switchTab:只能用于跳转到tabbar页面,并关闭其他非tabbar页面。
数据读写
微信小程序获取时间
本部分来源:微信小程序获取系统时间、时间戳、时间时间戳加减。
在script的函数内写下面的部分代码,通过双向绑定和格式整理即可获取到需要的时间和格式。
//获取当前时间戳
var timestamp = Date.parse(new Date());
timestamp = timestamp / 1000;
console.log("当前时间戳为:" + timestamp);
//获取当前时间
var n = timestamp * 1000;
var date = new Date(n);
//年
var Y = date.getFullYear();
//月
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
//日
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
//时
var h = date.getHours();
//分
var m = date.getMinutes();
//秒
var s = date.getSeconds();
console.log("当前时间:" +Y+M+D+h+":"+m+":"+s);
//转换为时间格式字符串
console.log(date.toDateString());
console.log(date.toGMTString());
console.log(date.toISOString());
console.log(date.toJSON());
console.log(date.toLocaleDateString());
console.log(date.toLocaleString());
console.log(date.toLocaleTimeString());
console.log(date.toString());
console.log(date.toTimeString());
console.log(date.toUTCString());
//时间、时间戳加减 以加一天举例,聪明的你肯定触类旁通
//加一天的时间戳:
var tomorrow_timetamp = timestamp + 24 * 60 * 60;
//加一天的时间:
var n_to = tomorrow_timetamp * 1000;
var tomorrow_date = new Date(n_to);
//加一天后的年份
var Y_tomorrow = tomorrow_date.getFullYear();
//加一天后的月份
var M_tomorrow = (tomorrow_date.getMonth() + 1 < 10 ? '0' + (tomorrow_date.getMonth() + 1) : tomorrow_date.getMonth() + 1);
//加一天后的日期
var D_tomorrow = tomorrow_date.getDate() < 10 ? '0' + tomorrow_date.getDate() : tomorrow_date.getDate();
//加一天后的时刻
var h_tomorrow = tomorrow_date.getHours();
//加一天后的分钟
var m_tomorrow = tomorrow_date.getMinutes();
//加一天后的秒数
var s_tomorrow = tomorrow_date.getSeconds();
正则表达式(Regex)(regular expression)
图标组件
图表组件可以用AntV-F2图表组件
调试
小程序里面可以调用vConsole,有时候如果服务器或者本地带宽不够,会导致小程序操作出现一些BUG。比如:在textarea输入和删除文本时可能会有无法输入和无法删除的问题。这个时候如果用vConsle调试而非在电脑上使用“真机调试”就可以避免网络带来的不必要调试障碍。打开方法:在小程序右上角点击选择栏,点击“打开调试”,会退出小程序,再次进入即可显示vConsole调试板。
域名
测试环境下,如果勾选了不校验合法域名的选项,是可以使用IP地址直接操作小程序的。但是发布到公网网络时需要配置域名才可以,小程序不被微信允许访问IP地址来给普通用户使用。
微信登录
作用
用户登录成功之后,可以拿到微信用户昵称、头像。更重要的事,可以拿到授权用户唯一标识openid。因为同一个微信用户,扫描某个固定网站的微信登录界面,得到的openid都是一样的。所以通过它就可以与数据库里面已经存在的用户数据进行关联,从而方便后续进行微信登录功能的开发。
注意
要使用微信开放平台,必须是主体才行,个人不行。何为主体? 就是必须要有营业执照才可以。 要么是企业的营业执照,要么是个体工商户的营业执照,个人是不支持的。
总流程详解
这个教程推荐:微信小程序之微信登陆 —— 微信小程序教程系列(20)
微信中的各种ID说明
- OpenID:用户唯一标识
- Union ID:用户跨多小程序和公众号的情况下,OpenID不同,通过同一个Union ID实现数据互联
- AppID:APP的ID号码
微信API
通过APPID和APPSECRET获取session_key和openid
http://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
{"session_key":"JXMzHRraFPycGvSLfit7Uw==","openid":"oFT2I5FYte5-O1oWSgktZnay5k2g"}
通过jsCode获取Open Id和sessionKey
微信小程序登录时,可以通过login接口获取一个jsCode,通过这个jsCode就可以获取到登录该小程序的微信对应的Open Id和sessionKey。见这个官方文档介绍:auth.code2Session
解密getUserInf()函数返回的数据的函数
/**
* 功能描述:解密用户敏感数据获取用户信息
*
* @param sessionKey 数据进行加密签名的密钥
* @param encryptedData 包括敏感数据在内的完整用户信息的加密数据
* @param iv 加密算法的初始向量
* @return
*/
public WxUserInfoDto getUserInfo(String sessionKey, String encryptedData, String iv) {
byte[] keyByte = Base64.decode(sessionKey); // 加密秘钥
byte[] dataByte = Base64.decode(encryptedData); // 被加密的数据
byte[] ivByte = Base64.decode(iv); // 偏移量
try {
/* 如果密钥不足16位,那么就补足. 这个if 中的内容很重要 */
int base = 16;
if (keyByte.length % base != 0) {
int groups = keyByte.length / base + (keyByte.length % base != 0 ? 1 : 0);
byte[] temp = new byte[groups * base];
Arrays.fill(temp, (byte) 0);
System.arraycopy(keyByte, 0, temp, 0, keyByte.length);
keyByte = temp;
}
/* 初始化 */
Security.addProvider(new BouncyCastleProvider());
Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding", "BC");
SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");
AlgorithmParameters parameters = AlgorithmParameters.getInstance("AES");
parameters.init(new IvParameterSpec(ivByte));
cipher.init(Cipher.DECRYPT_MODE, spec, parameters); // 初始化
byte[] resultByte = cipher.doFinal(dataByte);
if (null != resultByte && resultByte.length > 0) {
String result = new String(resultByte, "UTF-8");
return JacksonUtil.fromJSON(result, WxUserInfoDto.class);
}
} catch (Exception e) {
log.error(e.getMessage(), e);
}
return null;
}
pom.xml文件添加依赖如下:
<properties>
<bcprov-jdk16.version>1.46</bcprov-jdk16.version>
</properties>
<dependency>
<groupId>org.bouncycastle</groupId>
<artifactId>bcprov-jdk16</artifactId>
<version>${bcprov-jdk16.version}</version>
</dependency>
坑
- 在WebStorm上用mpvue修改了app.json文件后,必须把编译出来的dist文件夹删除,然后重开微信开发工具,只有这样开发工具才能更新app.json里面的信息。
- 小程序mpvue下多层次的数据值改变但是页面不动态渲染:改变的数据如果是多层级的,就不会触发render函数进行自动更新,所以需要在数据改变后手动调用this.$forceUpdate();强制更新。