微信小程序笔记

在前端学习方面，一直不太愿意去尝试过于新的东西。新的东西往往意味着功能不全面，要采坑填坑，学习成本较大。甚至经不起时间的考验，还没来得及应用就已经不能代表最先进的开发模式。特别是过去的五六年，前端发生了翻天覆地的变化，这就更需要我们有选择性的去学习，而不是冒然跟新。

但对于微信小程序，在过去的一年里的成长，大家是有目共睹的。不管是从官方更新节奏，还是社区活跃度，已经日趋成熟。甚至大部分的招聘岗位都不忘加上会小程序这一条。所以我觉得是时候应该来实践一下小程序了。

小程序的教程很多，下面我只是介绍下我在开发中的一些笔记。

mpvue

mpvue：http://mpvue.com

一套代码解决h5和小程序2个版本。

微信获取openid

客户端调用接口wx.login() 获取临时登录凭证code（有效期五分钟），将其发送给服务端(开发者服务器)，服务端拿code跟微信服务器换取openid和 session_key 等信息；

自定义元素属性

自定义属性以’data-‘开始，可以通过事件对象e.target.dataset获取到自定义属性：
data-name属性，e.target.dataset.name获取;
data-userName属性，e.target.dataset.username获取;
data-user-name属性，e.target.dataset.userName获取。

weUi

weui.css :https://github.com/Tencent/weui

weui.wxss :https://github.com/Tencent/weui-wxss

weui.js版本 :https://www.npmjs.com/package/weui.js

动态生成小程序码

基本步骤：后端拿appid和秘钥跟微信服务器换取token，然后用token和小程序码的path等信息，调微信官方接口生成小程序码

小程序支持通过API接口生成二维码，一种有3中接口，接口也都很简单，传入要生成的path，width即可，可是弄了很久，已知返回null，最后查找资料发现，小程序的API并不是返回图片地址，而是直接返回了二进制文件。
解决办法（php）：
通过file_put_contents将二进制图片存储到服务器。

图片长按发送好友

方法一：
wx.previewImage(Object object)
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。如果不喜欢新页面的方式打开，就只能用第二种方法。

方法二：
内嵌网页web-view里的img图，长按用户可以进行保存图片、发送给朋友等操作。内嵌网页没有原生小程序页面流畅。

wx.request post请求需要修改请求头

wx.request的请求头默认为：
header: {‘content-type’: ‘application/json’ // 默认值},
在post请求中需要修改Content-Type值：
header: {“Content-Type”:”application/x-www-form-urlencoded”},

自定义属性

data-name=‘’ 可以通过事件属性 e.currentTarget.dataset.name 获取；

data-userName=‘’ 可以通过事件属性 e.currentTarget.dataset.username 获取；

data-user-name=‘’ 可以通过事件属性 e.currentTarget.dataset.userName 获取；

backgroundColor无效

json中关于window的属性backgroundColor无效。其实不是无效，是理解上的一个错误。backgroundColor我们误以为是指页面背景颜色，其实是指下拉后露底的底色。

另外页面颜色默认的白色通过在wxss中background-color修改。

background-color:none不能去掉页面默认的白色。

scroll-view

使用竖向滚动时如果设置成百分比单位的高度，比如100%， 那page元素也需要设置高度 否则scroll-into-view可能失效。

在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh 也无法露底 无法看到加载动画

若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view

请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

<scroll-view class="flex groups box box-tb" scroll-y="true" bindscrolltoupper="scrolltoupper" scroll-into-view="{{scrollIntoView}}">


</scroll-view>

//scroll-view的下拉刷新
  scrolltoupper: function(e){
    console.log('刷新')
    wx.showNavigationBarLoading() //在标题栏中显示加载

    //模拟加载
    setTimeout(function()
    {
      // complete
      console.log('停止刷新')
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    },5000);
  },
//页面的下拉刷新
  onPullDownRefresh: function(){
    console.log(0)
    setTimeout(function()
    {
       wx.stopPullDownRefresh()

    },5000);
  }