小程序交流群:528215729,加入和小伙伴们一起探讨开发疑难、运营idea吧

admin

admin

发表于 2018-05-19 17:41:49

摘要:简易博客(小程序)之旅 (微信小程序开发 - 微信 小程序外包开发-微信小程序 开发教程-微信小程序开发者社区,尽在 www.mntuku.cn)

时至今日微信小程序越来越热,最近看了小程序的开发文档,做了一个简易版的博客,遇到了一些问题和觉得重要的在下面 记录一下便己便人

微信小程序尺寸单位

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: