小程序开发(1)

• 小程序注册
• 小程序api
• 下载开发工具
• 未注册如何开发
• 域名/证书问题
• 小程序如何获取用户信息
• 开发遇到问题
• 其他

---

小程序注册

注册地址:https://mp.weixin.qq.com/
一般小程序的注册主体是企业,政府,媒体,其他,但是不包含个人.所以如果想要个人开发的话, 找个分享群, 说不定别人给你一个测试的名额

小程序API

最重要的其实就是完整的看一遍小程序的开发规范和api, 很多问题其实都在文档中有一些标注和说明.
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

下载开发工具

地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
此页面同时也是更新日志的发布点.

未注册如何开发

微信开发工具的说明是:
开发者需要使用已在后台绑定成功的微信号扫描二维码登录
但是如果没有注册过的,可能就真的不能使用微信的工具了. 但是可以回归原始的变成方式, 直接使用txt..或者可以加一些小程序开发的群,有些会有共享的.

域名/证书问题

一般遇到的情景是开发工具和ios中能够获取到数据,但是android不行, 大部分的原因就是网站证书设置的问题. 不论是ssl还是tsl, 小白搞不明白, 可以简单的几个步骤检查.

1. chrome打开网址[没有chrome的自己下载].
2. 点击网址左侧的绿色锁, 弹出窗口, 点击 详细信息.
   
   

3. 底部弹出窗口. 找到类似ssl,tsl字样.

   
   
   
4. 说明是支持到1.2的. 微信api中有说明, 最好是1.2版本,并且支持1.0,1.1旧版本.
5. 如果网址上查看是1.2 ,问题没有解决, 只能查看网络服务器的配置了.找网络

小程序如何获取用户信息,openid,unionid

一般获取用户信息,就是头像之类的, 如果要做自己的用户系统那么就需要用户的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;

1. 校验签名
2. 获取用户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中.
如何解密? 网上一大堆.

开发遇到的问题

• 小程序的布局
  推荐使用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,调用接口, 后台收不到数据.仔细阅读接口说明..

其他

一些小插件:
小程序内部通知插件,https://weappdev.com/t/wxnotificationcenter/233/4

更多资料访问:https://weappdev.com/
这个真心是免费帮别人推广了.\(^o)/~