简易博客(小程序)之旅

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

微信小程序尺寸单位

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

 }

　页面数据的初始化

<!--

bindtap 点击事件
data-id，data-uid 传给详情页面的参数

-->
<view class="content_list" wx:for="{{list}}" wx:for-item="post" bindtap="opendetail" data-id="{{post.id}}" data-uid="{{post.publish.id}}">      
          <view class="content_head">
                <image src="{{baseurl}}{{post.publish.pic}}"></image>
                <view class="content_head_rt">
                    <view class="content_nickname">{{post.publish.nickname}}</view>
                    <view class="content_time">{{post.time}}</view>
                </view>
          </view>
          <view class="content_box">
            <view class="content_title">{{post.title}}</view>
            <view class="content_cont">{{post.duancontent}}</view>
          </view>
        </view>

　当实现列表和详情页面，就发现原来微信小程序不支持html,为了html转wxml 我下载了wxParse 插件用来编译

wxml:

<import src="../../wxParse/wxParse.wxml"/> 
<view class="wxParse detail_cont">
      <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

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     
    }
  }