微信小程序

微信小程序

一、介绍

1、官网API

小程序官网：https://mp.weixin.qq.com/wxopen/initprofile?action=home&lang=zh_CN&token=1956940063
开发文档：https://developers.weixin.qq.com/miniprogram/dev/
开发者社区：https://developers.weixin.qq.com/

2、微信小程序特点：免安装，操作接近原生APP，必须在微信中使用。用户扫一扫、搜一搜即可使用。

3、小程序的宣传方式

（1）、小程序搜索入口 & 附近的小程序
（2）、扫一扫，长按识别小程序
（3）、好友分享，群分享
（4）、关联公众号
（5）、第三方的小程序应用商店
（6）、小程序之间相互跳转

二、开发流程

1、流程

注册小程序--> 代码开发-->提审（微信审核代码）-->审核通过-->上线

2、注册小程序

方式：

（1）通过公众号注册
（2）通过微信小程序官网注册：https://mp.weixin.qq.com/,选择小程序，注册个人信息

三、小程序单位

1、rpx

(1)、rpx是微信小程序解决自适应屏幕尺寸的尺寸单位，微信小程序规定的屏幕宽度为750px。
(2)、无论是IPhone6还是其他机型，都是750rpx的屏幕宽度，以iPhone6来讲，屏幕宽度是375px,把它分为750rpx，则 1rpx = 0.5px。

2、rem

微信小程序支持rem尺寸单位，rem规定屏幕宽度为20rem，所以1rem = (750/20)rpx = 37.5rpx

四、小程序常见问题

1、API请求

使用 wx.request 发送请求，本地测试时，需要按照下图将 "不校验合法域名..." 选中。

2、基础库兼容

（1）、小程序中的API并不是所有基础库都支持的，这里切换不同的基础库进行调试。

例如：wx.setClipboardData这个API只能是1.1.0版本以上的可以使用，所以调用的时候需要进行判断

//copy方法中调用微信的粘贴剪切板功能
copy:function(){
    //如果当前基础库支持，直接调用
    if(wx.setClipboardData){
      wx.setClipboardData({
        data: "大事发生",
        success: function (rsp) {
          wx.showModal({
            title: '复制成功',
            content: '内容复制成功',
          })
        }
      })
    }
    //如果当前基础库不支持，需要升级微信的版本
    else{
      wx.showModal({
        title: '提示',
        content: '请升级您的微信版本',
      })
    }
  }

(2）、判断某一基础库是否支持某个API，可以首映 ： wx.canIUse() 即可。

例如； wx.canIUse("setClipboardData"),若支持返回 true，反之，返回false。

(3)、wx.getSystemInfoSync返回参数中的"SDKVersion",就是当前微信的基础库版本

onLoad: function () {
    console.log(wx.getSystemInfoSync())
  }

3、不同页面传值方式

（1）、url传值

例如：从列表页面进入到详情页面

//列表页面定义的进入详情的事件
 toDetail: function (e) {
    console.log(e)
    var index = e.currentTarget.dataset.index;
    var proList = this.data.proList;
    var id = proList[index].id;
    wx.navigateTo({
      url: '/pages/detail/detail?id='+id,
    })
  }
  
//详情页面
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //这里得到的options,就是列表页面中wx.navigateTo的属性url中的参数id。
    console.log(options)
  }

（2）、全局变量传值

//在app.js中设置全局变量
App({
  globalData: {
    userInfo: null,
    host:"http://localhost:5000"
  }
})
//在其他页面调用变量，
onLoad: function () {
   //得到的结果：http://localhost:5000
  console.log(app.globalData.host);
}

（3）、缓存中拿数据 （这是最常用的方法）

微信小程序的缓存有10M大小，存一般的文本信息足够用了，除非存一些视频会不太够用，不过一半视频也不会存在缓存中的。

例如：从列表页面进入到详情页面

//列表页面定义的进入详情的事件
 toDetail: function (e) {
    console.log(e)
    var index = e.currentTarget.dataset.index;
    var proList = this.data.proList;
    var id = proList[index].id;
    //存入缓存中
    wx.setStorageSync("id", id)
    wx.navigateTo({
      url: '/pages/detail/detail',
    })
  }
  
//详情页面
/**
  * 生命周期函数--监听页面加载
*/
 onLoad: function (options) {
    //这里得到的options,就是列表页面中wx.navigateTo的属性url中的参数id。
   var id = wx.getStorageSync("id")
   //从缓存中拿到id数据
   console.log(id)
 }