发表于 2018-05-19 17:41:49
时至今日微信小程序越来越热,最近看了小程序的开发文档,做了一个简易版的博客,遇到了一些问题和觉得重要的在下面 记录一下便己便人
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规定屏幕宽度为20rem;1rem = (750/20)rpx
注:开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
建议:设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px,这样的话,设计图上量出来的尺寸是多少px就是多少rpx,至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算
为了方便请求,可以对wx.request做一个简单的封装,这样我们再调用的时候就方便了许多,代码如下:
service/http.js
var rootDocment = --;//你的域名 function req(url, data, cb) { wx.request({ url: rootDocment + url, data: data, method: post, header: { Content-Type: application/x-www-form-urlencoded }, success: function (res) { return typeof cb == "function" && cb(res.data) }, fail: function () { return typeof cb == "function" && cb(false) } }) } module.exports = { req: req }
在app.js内引用 service/http.js文件,初始化全局变量每个页面都可以调用的到
var http = require(service/http.js); App({ func: { req: http.req } })
列表文件调用
app.func.req(域名后的地址, {请求的参数}, function (res) { console.log(res);//请求到的数据 })
请求到了数据那我要怎么设置他的数据,还要页面拿得到,通过setData设置数据,如要设置缓存
//设置缓存 wx.setStorage({ key: "chaceData", data: that.data }); //获取缓存 try { var value = wx.getStorageSync(chaceData) if (value) { that.setData(value); console.log(读取缓存); } else { console.log(读取网络); } } catch (e) { // Do something when catch error }
页面数据的初始化
{{post.publish.nickname}} {{post.time}} {{post.title}} {{post.duancontent}}
当实现列表和详情页面,就发现原来微信小程序不支持html,为了html转wxml 我下载了wxParse 插件用来编译
wxml:
js:
//要先引入wxparse文件 var WxParse = require(../../wxParse/wxParse.js); //调用--content :内容 WxParse.wxParse(article, html, content, that, 5);
/** * 用户点击右上角分享 */ onShareAppMessage: function () { return { title: 分享的标题, path: app.getCurrentPages()//小程序的方法自动获取当前页面地址 } } //无奈这种分享 分享时标题获取不到,后没有用app.getCurrentPages() 微信的方法,地址拼接上去 就可以了 onShareAppMessage: function (res) { var that = this; if (res.from === button) { // 来自页面内转发按钮 console.log(res.target) } return { title: 分享的标题, path: pages/detail/index?id= + id + &uid= + uid } }