微信带参数的二维码接口开发

Read more   2017/11/28 posted in  微信开发

微信PC授权登录开发

记录下微信PC授权登录的开发流程

参考资料

开发

基本和公众平台的网页授权差不多

  1. 第一步获取code
  2. 第二步通过code获取access_token
  3. 第三步通过access_token调用接口

在第二步的时候就可以获取到OpenId和unionid,由于我这次只需要Openid,所以我只做到了第二步。另外经测试通过开放平台微信授权获取到的OpenId和通过公众平台获取到的OpenId不一样。

Read more   2017/11/26 posted in  微信开发

微信模板消息开发

参考资源

前期准备

  1. 需要一个开通了模板消息的微信公众账号
  2. 添加消息模板。可以从模板库中选择添加;也可以新增,新增的模板需要通过微信审核,规则可以查看上面的模板消息运营规则 0F836621-5A44-4017-A8FC-E16EE778054E
Read more   2017/11/26 posted in  微信开发

微信小程序开发

微信小程序是由微信打造出来的一种不用下载即可使用的应用框架,但只能在微信的应用里运行。

一、开发准备

  1. 需要申请一个小程序账号
  2. 浏览一遍开发文档
  3. 开发工具可以使用微信开发者工具或者其他的编辑器,但小程序上传到微信服务器,只能通过微信开发者工具。

二、开发

小程序开发主要分为两大块:

  1. 前端 主要开发前端的页面视图,需要使用微信提供的小程序开发框架。框架提供了自己的视图层描述语言 WXMLWXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统。小程序的文件大小目前是限制在2MB
  2. 服务端 服务端主要用于处理前端的数据请求和响应,可以用任何后端语言开发。

1、文件结构

  1. app.json 全局配置文件
  2. app.js 全局逻辑,用App() 函数(函数接受一个 object 参数)来注册,在其他页面逻辑js文件里用 getApp() 函数获取。
  3. app.wxss 公共样式表
  4. pages 页面文件夹,所有页面必须在 app.json 里进行注册
//app.json
{
  "pages": [
    "pages/index/index"  //指向 /pages/index/index.wxml 文件
  ]
}

一个小程序页面由四个文件组成(四个文件的文件名必须具有相同的路径与文件名):

  1. *.js 页面逻辑
  2. *.wxml 页面结构(后面都称之为视图文件)
  3. *.wxss 页面样式表 (后面都称之为样式文件)
  4. *.json 页面配置

2、常用API

  1. wx.request(object) 发起请求,::客户端的 HTTPS TLS 版本为1.2,但 Android 的部分机型还未支持 TLS 1.2,所以请确保 HTTPS 服务器的 TLS 版本支持1.2及以下版本::
  2. wx.navigateTo(object) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。一个应用同时只能打开5个页面,当已经打开了5个页面之后,wx.navigateTo不能正常打开新页面。请避免多层级的交互方式,或者使用wx.redirectTo
  3. wx.setStorageSync(key,data) 将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。
  4. wx.getStorageSync(key) 从本地缓存中同步获取指定 key 对应的内容。
  5. wx.login(object) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。用户数据的加解密通讯需要依赖会话密钥完成。
  6. wx.getUserInfo(object) 获取用户信息,withCredentials 为 true 时需要先调用 wx.login 接口。通过该API返回的对象中包含了encryptedData 属性,该属性包括敏感数据在内的完整用户信息的加密数据,需要用加密数据解密算法解密。获取的用户信息可以用wx.setStorageSyncAPI保存在小程序本地。

3、页面逻辑

每个小程序页面都必须包含后缀为 .js 的页面逻辑文件,在这个文件里面,必须用 Page(object) 函数来注册页面,该函数接受一个object参数,其指定页面的初始数据、生命周期函数、事件处理函数等。在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。

常用 object参数属性:

  • data 初始化数据,在视图文件中通过wxml绑定
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})
  • onLoad 生命周期函数--监听页面加载,一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数
Page({
    onLoad(options){
        //options,其他页面打开当前页面所调用的 query 参数对象
    }
})
  1. onPullDownRefresh 页面相关事件处理函数--监听用户下拉动作,需要在config的window选项中开启enablePullDownRefresh
  2. onReachBottom 页面上拉触底事件的处理函数
  3. onShareAppMessage 用户点击右上角转发,只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮
  4. 事件处理函数,在渲染层(视图文件)可以在组件中加入事件绑定,当达到触发事件时,就会执行 Page 中定义的事件处理函数。 xml <view bindtap="viewTap"> click me </view> javascript Page({ viewTap: function() { console.log('view tap') } })

Page.prototype.setData()
setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  //直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致
    // 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。     
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

4、WXML页面渲染

数据绑定使用 Mustache 语法(双大括号)将变量包起来
如果是组件属性、控制属性、关键字、简单的运算,都需要在双引号之内

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
  • 条件渲染 > 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

还可以使用hidden,使用hidden 组件始终会被渲染,只是简单的控制显示与隐藏
一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用

使用name属性,作为模板的名字。然后在