小程序的7788（待更）

一、关于长度单位

小程序中wxss样式中的“绝对长度单位”是px，然而这并不是传统意义上的像素值，而是逻辑分辨率pt（简言之，wxss中的px即代表pt，而非物理分辨率），逻辑分辨率pt是长度单位，视觉单位，只和屏幕尺寸有关；物理分辨率px与屏幕尺寸无关，代表物理像素点，点只有个数，没有长度。下图中iPhone6的Reader为@1x，表示1个pt包含2个px。

二、移动端适配

小程序中wxss屏幕自适应的实现可以采用相对长度单位rpx，如果原型图是以iPhone6的规格设计的，则可以将rpx与px等值转换，这里的px是指原型图中的长度单位（物理分辨率，或称为像素）。

三、数据、业务分离

小程序中数据与业务分离的写法，数据脚本文件使用module.exports = {key: value}输出包含数据的对象；业务脚本中引入数据脚本使用var data = require('./data.js')，只能使用相对路径引入。

// data.js  数据脚本
var local_database = [
    {
        title: "从视觉到触觉 这款VR手套能给你真实触感",
        content: "8月29日消息，据国外媒体VentureBeat报道，一家名为Dexta Robotics的公司最近发布了一款有望变革虚拟现实手部追踪与交互方式的新产品",
        imgSrc: "/images/post/vr.png",
        reading: 102,
        detail: "消息，据国外媒体VentureBeat报道，一家名为Dexta Robotics的公司最近发布了一款有望变革虚拟现实手部追踪与交互方式的新产品。该产品名为“Dexmo”，它是一款像手套那样戴在手上使用的未来主义外骨骼。它内置大量的元件，能够与VR体验进行交互，可帮助你感觉握在你的双手的虚拟物体。Dexmo据Dexta称，“Dexmo是一款针对你的双手的机械外骨骼。它能够捕捉你的手部运动，以及提供即时的力反馈。有了Dexmo，你可以感受到虚拟物体的大小、形状和坚硬度。你可以接触数字世界。”市面上已经有数款产品旨在处理虚拟现实中的手部交互，也有相关的产品即将要进入市场。例如，颇受欢迎的HTC Vive头盔配有一副控制器，其控制器能够使得追踪系统看到你的双手，让你可以用它们来在特定体验中与物体进行交互。今年晚些时候，Oculus将开始出货类似的手部控制产品Oculus Touch。10月，索尼也将开始出货配备两个PlayStation Move手部控制器的PS VR。Leap Motion甚至更进一步：利用传感器来追踪手指和手部的运动。",
        collection: 26,
        dateTime: "24小时前",
        headImgSrc: "/images/post/vr.png",
        author: "深白色",
        date: "Nov 20 2016",
        avatar: "../../../images/avatar/3.png",
        postId: 4,
        music: {
            url: "http://ws.stream.qqmusic.qq.com/C100000Zn0vS4fKKo8.m4a?fromtag=38",
            title: "沉默是金-张国荣",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000003at0mJ2YrR2H.jpg?max_age=2592000"
        }
    },
    {
        title: "爱奇艺创维开展战略合作，合力布局开放娱乐生态",
        content: "爱奇艺和创维分别作为国内领先的在线视频品牌",
        imgSrc: "/images/iqiyi.png",
        reading: 96,
        detail: "爱奇艺和创维分别作为国内领先的在线视频品牌和家电品牌。双方一直锐意创新，为用户提供优质的服务体验和产品体验。据悉，爱奇艺与创维将展开从资本到VIP会员服务等各方面的深入合作。籍由此次合作，爱奇艺将战略投资创维旗下拥有高端互联网电视品牌的酷开公司。从下一财年开始，创维旗下互联网电视将通过银河互联网电视集成播控平台，预置VIP会员服务及相关内容。这种捆绑终端与VIP内容的全新销售模式，将大幅提升互联网电视终端用户的体验，给予用户更多优质内容的选择。",
        collection: 26,
        dateTime: "21小时前",
        headImgSrc: "/images/iqiyi.png",
        author: "深白色",
        date: "Nov 20 2016",
        avatar: "../../../images/avatar/5.png",
        postId: 5,
        music: {
            url: "http://ws.stream.qqmusic.qq.com/C100002I8eGJ28BI17.m4a?fromtag=38",
            title: "朋友-谭咏麟",
            coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000"
        }
    }
]
module.exports = {
    postList: local_database
}

// post.js  业务脚本文件
var postsData = require('../../../data/posts-data.js')  // 这里只能用相对路径引入
Page({
        // 业务逻辑
})

四、模板的复用

<!-- 模板文件 -->
<template name="postItem">
    <view class="post-container">
           // ...
    </view>
</template>

// post.wxml
<import src="../../post-template.wxml" />

<template is="postItem" data="{{item}}"/>
// 通过设置data属性传入参数

1 2	`// post.wxss @import "../../post-template.wxss";`

五、标签上的自定义属性及其传递

data-xxx为固定格式，xxx会被解析为全小写，如果要用驼峰式命名，应使用连字符。比如data-post-id会被解析为postId

// post.wxml
<view data-postId="123" catchtap="onPostTap">
        // 
</view>

// post.js
onPostTap : function(event) {
    var postId = event.currentTarget.dataset.postid;
    // console.log(postId);
    wx.navigateTo({
        url:"post-detail/post-detail?id=" + postId
        // id为参数名，自定义的
    })
}

// post-detail.js
Page({
    onLoad:function(option){
        var postId = option.id;
    }
})

注：onLoad方法中，如果不是异步的去执行一个数据绑定，则不需要使用this.setData方法，只需要对this.data赋值即可实现数据绑定。（异步：既onLoad方法执行完成而数据绑定还未执行的情况）。
target指代的是触发事件的组件，而currentTarget指代的是事件捕获的组件