小程序的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属性传入参数
// 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指代的是事件捕获的组件

六、Storage缓存技术

https://mp.weixin.qq.com/debug/wxadoc/dev/api/data.html#wxgetstorageinfoobject

七、交互反馈(API)

https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowloadingobject
wx.showToast(OBJECT)
wx.showModal(OBJECT)
wx.showActionSheet(OBJECT)
wx.playBackgroundAudio(OBJECT)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容