微信小程序学习笔记

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指的是事件捕获的组件