最近在写一个简单的小程序，在此记录小程序相关知识。
关于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*/
<view class='login_btn' >
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">登 录</button>
</view>
//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页面顶部引入一句话：
<wxs module="dateFr" src="../filter/filter.wxs"></wxs>
<view class='newsList'>
<block wx:for="{{news_list}}" wx:key="key">
<view class='list_box' bindtap='toNewsDetail' data-id ="{{item.id}}">
<view class='list_l'>
<text class='title'>{{item.title}}</text>
//实践戳作为变量传入即可,用哪个写哪个暴露对象
<text class='date'>{{dateFr.timestampToTime(date)}}</text>
</view>
<view class='list_r'>
<image src='{{Img}}{{item.photo}}'></image>
</view>
</view>
</block>
</view>
今天不想写了，明天继续更。
