微信小程序

# 微信小程序 --- [TOC] ## 1.下载 [小程序工具][1] ### 4.rpx说明 px为物理像素点,pt为逻辑像素点 iPhone6逻辑像素375x667 ,设计稿宽度为750; 则用设计稿的750rpx即可iPhone6 1px=1rpx=0.5pt, ### 5.布局 在设计样式时候,布局推荐采用flex布局 ### 6.技巧 #### 1.在pages中配置window 在配置pages中的页面时,app.json中的 ```json { "window": { "navigationBarBackgroundColor": "#b3d4db" } } ``` 变为welcome.json ``` { "navigationBarBackgroundColor": "#405f80" } ``` #### 2.对swiper等属性操作 推荐加上`{{ }}` ``` ``` `{{}}`中的值具有布尔值的效果 #### 6.绑定函数 *事件绑定的写法同组件的属性，以 key、value 的形式。* *key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart或者如bind:tap、、catch:touchstart。* ``` 开启微信小程序 ``` 跳转实例(相对路径) ``` { onTap:function(){ //可以返回referer页面,并且最多跳五级 wx.navigateTo({ url: '../posts/posts', }) //无法返回referer页面 wx.redirectTo({ url: '../posts/posts', }) }, } ``` #### 7.加载本地数据 在根目录 `/data/posts-data.js` ``` var local_database = [ { title: '正是霞飞卸妆时1',postId:0}, { title: '正是霞飞卸妆时2',postId:1}, { title: '正是霞飞卸妆时3',postId:2}, ]; //模块输出 module.exports={ postList:local_database, } ``` 在post.js中载入 ``` //注意此时载入更目录 需要../../ 且只能是相对路径 var post_content=require('../../data/posts-data.js'); onLoad: function () { //注意载入为数据,需添加键名 postList this.setData({post_key:post_content.postList}); }, ``` #### 8.使用模版 在项目的子目录中创建 在`post`目录中 `post/post-item/post-item-template.wxml` `post/post-item/post-item-template.wxss` 在wxml中 ``` ``` 在`post.wxml`中 ```js //注意加反斜线 //