小程序项目基础

项目准备

1. 登录小程序官网，获取appid

2. 安装微信开发工具

3. 页面： wxml 用来编写页面骨架的文件 view 容器 分隔文档，相当于div button 按钮最好用view嵌套text代替

4. 顶部条颜色设置：app.json中设置 "window": { "navigationBarBackgroundColor":"#b3d4db" }

5. 附： 1）单位：小程序自适应单位RPX(iphone6)会随机型分辨率调整大小，图片默认大小可以直接写。如果用px，则需要在原始数据上除以2

   2）小程序默认图片大小： width:300px; height: 225px;

   3） \n，在text标签中表示换行符

分辨率

1. 逻辑分辨率：pt, pt的大小和屏幕尺寸有关，简单可以理解为长度和视觉单位
2. 物理分辨率：px, 物理像素点，和屏幕尺寸没有关系
3. 1个pt可以有1个或多个px构成。iphone6下2个px才构成1个pt，所以设计稿一般的尺寸是750px

如何做不同分辨率设备的自适应？

ip6下1px = 1rpx = 0.5pt，使用rpx，小程序会自动在不同分辨率下进行转换，而使用px单位不会

项目开始

使用swiper组件构建轮播图

可直接引入标签

<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000">
  <swiper-item>
    <image></image>
  </swiper-item>
</swiper-item>

indicator-dots，分页器；autoplay，自动轮播；interval，自动轮播间隔时间；决定轮播图高度的容器是swiper

数据双向绑定

1. setData方法数据绑定，将数据拷贝到data里面。方法写进生命周期函数onLoad(监听页面加载)
2. 数据绑定的扩展用法 条件渲染 wx:if={{}}, 列表渲染 wx:for={{}}

事件机制：catch与bind

1. bind:tap="onTap" 绑定点击事件
2. catch:tap="onTap" 同样是绑定点击事件，但是可以阻止事件冒泡

使用require加载JS模块文件

1. 从js文件将数据导出：module.exports = {key: val}
2. 从另一个js文件将数据引入：require("路径")，这里的路径必须是相对路径

css分离

1. css 引入 @import '路径'

template 模板的使用

创建模板文件(.wxml .wxss)

 <template name="postItem"></template>

模板文件引用:

<import src="引用文件路径" />
<template is="postItem" />

引用模板文件同时传递数据，data属性

<template is="postItem" data="{{item}}" />

扩展运算符

巧用ES6扩展运算符，将对象展开。在使用模板的时候，可以直接写对象{key, val }内部对象key值，方便模板复用.

 <block wx:for="{{ posts_content}}"   wx:for-item="item"  wx:key="index">
    <template is="postItem" data="{{...item}}" />
  </block>

组件自定义属性及获取属性

点击页面跳转

1. 在template或者block标签上不能监听事件，view标签可以

<view bind:tap="onPostTap">
    <template is="postItem" data="{{...item}}" />
</view>

2. 路由，wx.navigateTo(url: '路径')

  onPostTap: function() {
    // console.log('onPostTap');
    wx.navigateTo({
      url: 'post-detail/post-detail'
    })
  }

3. 自定义属性必须以'data-'开头命名，如果属性名有大写字母，最后会被转为小写

 <view bind:tap="onPostTap" data-postId="{{item.postId}}">
     <template is="postItem" data="{{...item}}" />
   </view>

js中获取id(不清楚的情况下可以先打印event)

 onPostTap: function(event) {
    // console.log(event);
    var postid = event.currentTarget.dataset.postid;
  }

4. 页面编写原则：先静候动，先样式再数据。动态加载页面数据，页面间传递数据，可以将id接在url的后面，传递数据。

 onPostTap: function(event) {
    var postid = event.currentTarget.dataset.postid;
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postid
    })
  }

另一个页面接收数据(传递到参数options中)：

onLoad: function (options) {
    var postId = options.id;
    // console.log(postId);
    var postData = postsData.postList[postId];
    this.setData({...postData});
}

5. Storage缓存的基本用法(改变文章是否被收藏的状态)

文章是否被收藏的状态保存在服务器，当页面加载的时候，从服务器获取是否收藏的状态， 用户修改状态后，向服务器提交修改后状态

写入/ 修改缓存：

wx.setStorageSync(key, data);

获取缓存：

var data = wx.getStorageSync('post');

删除缓存：

wx.removeStorageSync('post');

清空缓存：

wx.clearStorageSync();

注意： 单个key存储上限为1M，所有数据存储上限为10M。带Sync为同步操作，不带Sync为异步操作。

收藏图标 切换：wx:if="{{collected}}" 和 wx:if="{{!collected}}" 或者wx:if="{{collected}}" 和 wx:else"

取消收藏提示弹框图标 wx.showToast(Object object)

6. 导航条

tabbar在 app.json 中配置。注意： 如果跳转的页面有tabbar的话，跳转发放，必须使用wx.switchTab({url: '路径'});

7. 好用的小程序组件：
8. TaleLin/lin-ui (github搜索lin-ui)
9. mpvue (vue编写小程序)
10. Taro (Recat编写小程序)