<h5 id="1">小程序注册<h5>
注册地址:https://mp.weixin.qq.com/
一般小程序的注册主体是企业,政府,媒体,其他,但是不包含个人.所以如果想要个人开发的话, 找个分享群, 说不定别人给你一个测试的名额
<h5 id="2">小程序API</h5>
最重要的其实就是完整的看一遍小程序的开发规范和api, 很多问题其实都在文档中有一些标注和说明.
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
<h5 id="3">下载开发工具</h5>
地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
此页面同时也是更新日志的发布点.
<h5 id="4">未注册如何开发</h5>
微信开发工具的说明是:
开发者需要使用已在后台绑定成功的微信号扫描二维码登录
但是如果没有注册过的,可能就真的不能使用微信的工具了. 但是可以回归原始的变成方式, 直接使用txt..或者可以加一些小程序开发的群,有些会有共享的.
<h5 id="5">域名/证书问题</h5>
一般遇到的情景是开发工具和ios中能够获取到数据,但是android不行, 大部分的原因就是网站证书设置的问题. 不论是ssl还是tsl, 小白搞不明白, 可以简单的几个步骤检查.
- chrome打开网址[没有chrome的自己下载].
- 点击网址左侧的
绿色锁, 弹出窗口, 点击 详细信息.
-
底部弹出窗口. 找到类似ssl,tsl字样.
- 说明是支持到1.2的. 微信api中有说明, 最好是1.2版本,并且支持1.0,1.1旧版本.
- 如果网址上查看是1.2 ,问题没有解决, 只能查看网络服务器的配置了.找网络
<h5 id="6">小程序如何获取用户信息,openid,unionid</h5>
一般获取用户信息,就是头像之类的, 如果要做自己的用户系统那么就需要用户的openid.
//app.js
App({
onLaunch: function() {
wx.login({
success: function(res) {
if (res.code) {
//发起网络请求
wx.request({
url: '你的域名api',
data: {
code: res.code/* code用来交换得到用户openid的 */
}
})
} else {
console.log('获取用户登录态失败！' + res.errMsg)
}
}
});
}
})
后台部分伪代码
// 1. 得到前台传递的code
String code = getParam("code");
// 2. 调用微信接口(WX_LOGIN_URL=https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code), 需要替换一下appid等, JSCODE就是获取到的code
String url = WX_LOGIN_URL.replace("APPID", '小程序的appid').replace("SECRET", '小程序的AppSecret,注意保管,微信是不会保存的').replace("JSCODE", code);
// 3. 调用接口
JSONObject json = HttpPostUtils.sendForm(url);
// 4. 得到返回值
String session_key = json.getString("session_key");
String openid = json.getString("openid");
如果要校验用户是否正确啊之类的还需要校验签名, signature;
- 校验签名
- 获取用户unionid, 要获取unionid,必须在开发者平台绑定小程序, 如果绑定了其他公众号, 可以共用用户信息.
wx.getUserInfo({
success: function (userData) {
wx.request({
url: '你的api',
data: {
code:loginData.code,/** code */
rawData: encodeURI(userData.rawData),/** 未加密用户数据 */
signature: userData.signature,/**签名 */
encryptedData:userData.encryptedData,/**加密之后的用户数据 */
iv:userData.iv /** 加密算法向量 */
},
method: 'POST',
success: function(res){
/* 服务器返回 */
}
})
}
})
所需要的openid和unionid其实就藏在encryptedData中.
如何解密? 网上一大堆.
<h5 id="7">开发遇到的问题</h5>
- 小程序的布局
推荐使用flex. 网上百度一下, 很多flex教程, 也有一些插件. 这里我偷懒贴一个:
http://coffcer.github.io/flex-layout/# - 数据传递
小程序分为显示层wxml,数据层js, 数据要在xml中展示, 必须使用this.setData({}),其他的都是伪科学. - 小程序不支持删除布局, 也就是说只能增加结构,最多是隐藏, 不会删除.
- 证书没毛病,工具和ios都可以解析返回的数据, 但是android不行.
解析返回值, 转化为json结构,
if(typeof (data) == 'string'){
data = JSON.parse(xx)
};
- 小程序支持animate.
- 目前2017.01.10为止,android中的textarea还是有问题.多行输入的时候使用form提交, 由于textarea的层级比button的高所以不能点中button,虽然微信开放了键盘的完成按钮, 点击完成后,会提交数据.
变通方法, 是bindinput方法监控输入, 但是这样一来就不能获取formId, 也就不能发送外部消息了.不过一般场景可能也用不到这个.. - 重复的结构,最好提取为单独的wxml,然后引用.
- formId只有真机下才有.
- 不能动态变更样式, 所以设置css, 只能将style当成参数传递.
- scroll-view中滚动, 不会触发onPullDownRefresh
- 跳转的页面是tabbar时,一定要用wx.switchTab, wx.navigateTo不能跳转到被设置为tabbar的页面
- json是否包含某字段:data.hasOwnProperty('id')
- 数组添加数据list.push(xxx), 删除可以用Array.splice()
- wx.request全部都是异步调用, 没有阻塞方法,不过可以使用一个超长的toast.
wx.showToast({
title: '成功',
icon: 'success',
duration: 20000000000/*😁*/
})
// 取到值了.
setTimeout(function(){
wx.hideToast()
},300)
- wx.request,调用接口, 后台收不到数据.仔细阅读接口说明..
<h5 id="8">其他</h5>
一些小插件:
小程序内部通知插件,https://weappdev.com/t/wxnotificationcenter/233/4
更多资料访问:https://weappdev.com/
这个真心是免费帮别人推广了.\(o)/~
