小程序入门

最近在写一个简单的小程序，在此记录小程序相关知识。

关于rpx

1px = 2rpx;
px在手机上不会做响应，rpx会根据手机机型自适应。

此处应注意：手机上的字最好不要用rpx，一般字体大小进行缩放的话在小屏手机上会变得很小，影响阅读，字体可以使用px单位

小程序的屏幕被划分为750rpx，使用flex布局，初始化的时候app.css会帮你写好flex相关css。

异步存储变量

 this.setData({
        变量名：值
      })
等同于 this.data.变量名

调取用户信息

//app.js
App({
  data: {
    //注册全局imgurl公用头部，放入globalData比较规范，放这里也行
    imgUrl: "http://demo.188388.cn:8145/hqmk/web/upload/"
  } ,
  globalData: {
    userInfo: null  // 注册全局用户信息变量
  },
  //当你建立一个小程序demo的时候给你的实例↓
  onLaunch: function () {
    // 展示本地存储能力 
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })

    // 获取用户信息 这个才是我们要的
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  }
})

需要获取信息页面的js里：
我的小程序index页面是登录，所以我在登录的时候存了用户信息到globaldata里，在'我的'页面里调取globaldata里的变量值

/*index.wxml*/

      登  录

//index.js：
//获取应用实例
//这个方法是方便其他页面使用到全局app.js里的方法和变量的
const app = getApp()；

Page({
  data: {
    hasUserInfo: false,
    userInfo: {},
    //看小程序最新文档，button里的open-type属性是获取用户信息的关键，照着参考例子抄就行了
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  
  getUserInfo: function (e) {
    app.globalData.userInfo = e.detail.userInfo;
    var avatar = e.detail.userInfo.avatarUrl;
    app.globalData.avatar = avatar;
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })

  onLoad: function (options) {
    // 获取用户头像
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,//这个时候globaldata里面就有了一个userinfo的对象，在需要用到用户信息的页面创建app实例，打印一下app.globalData.userInfo试试，你想要的用户信息已经有了。
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  }
  
})

怎么使用过滤器？

小程序中，没有过滤器，如果想使用，自己封装，用export暴露，import引入。
page文件夹创建一个filter的文件夹，新建filter.wxs的文件，文件内容(日期格式过滤器为例)

var timestampToTime = function (timestamp){
  var date = getDate(timestamp * 1000);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '.';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '.';
  var D = date.getDate();
  return Y + M + D;
}
var timestampToTime1 = function (timestamp) {
  var date = getDate(timestamp * 1000);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
  var D = date.getDate();
  return Y + M + D;
}
var timestampToTime2 = function (timestamp) {
  var date = getDate(timestamp * 1000);// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '年';
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
  var D = date.getDate() + '日';
  return Y + M + D;
}
//想暴露几个暴露几个
module.exports = {
  timestampToTime: timestampToTime,
  timestampToTime1: timestampToTime1,
  timestampToTime2: timestampToTime2
}

用到过滤器的wxml页面顶部引入一句话：

  
    
      
        {{item.title}}

        //实践戳作为变量传入即可,用哪个写哪个暴露对象
        {{dateFr.timestampToTime(date)}}

      
      
        
      
    
  

今天不想写了，明天继续更。