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

  1. 首页
  2. 文章
  3. 微信小程序开发教程
  4. 简易博客(小程序)之旅

简易博客(小程序)之旅

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: