微信小程序学习笔记

1、基本骨架结构：

wxml:

<view class="container">    <image class="avatar" src="/images/avatar/1.png"></image>    <text class="motto">Hello, 宇智波胖虎</text>    <view class="journey-container" bindtap="onTap">        <text class="journey">开启小程序之旅</text>    </view></view>

单位：rpx

可以根据屏幕宽度进行自适应，1rpx = 0.5px = 1物理像素，可以用 iPhone6 作为视觉稿的标准。

小程序中用到的px，是逻辑物理像素，所以大小是设计图大小的一半。

弹性布局：

display:flex;flex-direction:column;align-items:center;

轮播：

<swiper>    <swiper-item></swiper-item></swiper>

js的page标准模板:

Page({  /**   * 页面的初始数据   */  data: {      },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {      },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {      }})

实际例子：

var postsData = require('../../data/posts-data.js')Page({  data: {    //小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A    // 而这个动作A的执行，是在onLoad函数执行之后发生的  },  onLoad: function () {    // this.data.postList = postsData.postList    this.setData({       postList:postsData.postList      });  },})

this.setData(json名)：将对象数据放到data:{};中，注意键值对应。

vertical="{{false}}"：别忘记花括号

wx:if="{{布尔值}}"  wx:else ：控制元素是否显示（用于是否收藏）

遍历，用<block></block>

<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">        <!--//template-->        <view catchtap="onPostTap" data-postId="{{item.postId}}">             <template is="postItem" data="{{...item}}"/>        </view></block>

微信跳转事件：

Page({    onTap: function (event) {        // wx.navigateTo({        //     url:"../posts/post"        // });                wx.switchTab({            url: "../posts/post"        });            }})

微信冒泡事件：微信事件从子元素向父元素冒泡

bindtap（可以）、catchtab（阻止）

模块化：

module.exports = {    postList: local_database}var postsData = require('../../data/posts-data.js')

循环绑定事件：

    <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">        <!--//template-->        <view catchtap="onPostTap" data-postId="{{item.postId}}">             <template is="postItem" data="{{...item}}"/>        </view></block>

小程序里没有DOM，只能进行数据绑定和小程序自带的组件

收藏与取消收藏（难点）：

getPostsCollectedAsy: function () {        var that = this;        wx.getStorage({            key: "posts_collected",            success: function (res) {                var postsCollected = res.data;                var postCollected = postsCollected[that.data.currentPostId];                // 收藏变成未收藏，未收藏变成收藏                postCollected = !postCollected;                postsCollected[that.data.currentPostId] = postCollected;                that.showToast(postsCollected, postCollected);            }        })    },    getPostsCollectedSyc: function () {        var postsCollected = wx.getStorageSync('posts_collected');        var postCollected = postsCollected[this.data.currentPostId];        // 收藏变成未收藏，未收藏变成收藏        postCollected = !postCollected;        postsCollected[this.data.currentPostId] = postCollected;        this.showToast(postsCollected, postCollected);    },

target指的是当前点击的组件、currentTarget指的是事件捕获的组件