小程序笔记

此文章仍在编写和完善中。

• 小程序的api

https://developers.weixin.qq.com/miniprogram/dev/api/

• 语法

1、if..else

wx:if
wx:elif
wx:else

2、for

wx:for
wx:for-item
wx:for-index

• rpx和px

用rpx，可以自动适配各种分辨率，类似android的dp
图片尺寸一般用rpx
iphone6下，rpx和px是1/1的，所以优先在6的模式下开发
文字的大小一般还是固定用px，避免小分辨率下文字太小的问题

• Flex布局

布局建议用flex，比较简单

//整体是列布局
.container {
  display: flex;
  flex-direction: column;
}
//图片一般设置宽高即可
.head-image {
  width: 100%;
  height: 460rpx;
}
//头像图片跟title对齐，需要给头像和title都设置垂直居中
.avatar {
  height: 64rpx;
  width: 64rpx;
  vertical-align: middle;
}
//内部容器需要行布局，设置flex-direction为row
.author-date {
  flex-direction: row;
  margin-left: 30rpx;
  margin-top: 20rpx;
}

• 事件

bindtap和catchtap
catchtap不冒泡

• 使用template来实现代码的复用

template，只支持wxml和wxss，js不支持，对应的js只能写到引用模板的组件的js里面。

<!--模板文件-->
<template name="postItem">
    <view class="post-container">
       <view class="post-author-date">
           <image class="post-author" src="{{avatar}}"></image>
                <text class="post-date">{{date}}</text>
        </view>
           <text class="post-title">{{title}}</text>
            <image class="post-image" src="{{imgSrc}}"></image>
            <text class="post-content">{{content}}
            </text>
            <view class="post-like">
                    <image class="post-like-image" 
                    src="/images/icon/chat.png"></image>
                    <text class="post-like-font">{{collection}}</text>

                    <image class="post-like-image" 
                    src="/images/icon/view.png"></image>
                    <text class="post-like-font">{{reading}}</text>
            </view>
        </view>
</template>

<!--引入模板-->
<import src="post-item/post-item-template.wxml" />
<view>
    <block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx">
        <view catchtap="onPostTap" data-postId="{{item.postId}}">
             <!--使用模板-->
             <template is="postItem" data="{{...item}}"/>
        </view>
</block>
</view>

• 页面数据传递

往详情页面传递文章id
1、wxml里面定义一个自定义属性

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

2、js里面捕获点击事件，并跳转页面
需要注意的是data-postId，会被转换成postid
如果是data-post-id，会被转换成postId

  onPostTap: function (event) {
    var postId = event.currentTarget.dataset.postid;
    // console.log("on post id is" + postId);
    wx.navigateTo({
      url: "post-detail/post-detail?id=" + postId
    })
  },

3、在详情页面的onLoad方法中进行接收

    onLoad: function (option) {
        var postId = option.id;
        console.log(postId);
    }

• 数据缓存

类似html5的localStorage
缓存上限最大不能超过10MB
缓存不能设置有效期，只有程序员和用户主动清理才会失效

1、同步设置

//设置
wx.setStorageSync('key',obj/str)
//获取
wx.getStorageSync('key')
//删除
wx.removeStorageSync('key')
//清除所有缓存
wx.clearStorageSync()

2、异步设置

wx.setStorage
wx.getStorage
wx.removeStorage

//异步的用法举例，如果storage内容比较大，获取很慢才考虑使用
var that = this;
wx.getStorage({
    key: "posts_collected",
    success: function (res) {
        var postsCollected = res.data;
    }
})

• 交互反馈

//toast
wx.showToast({
  title:'操作成功',
  duration:1000,
  icon:'loading',
})
wx.hideToast()

//modal
wx.showModal({})

//actionsheet
wx.showActionSheet({
  itemList:['分享给微信好友','分享到朋友圈','分享到微博'],
  itemColor:"#666666"
  success:function(res){
    #res.cancel代表是否点了取消，res.tapIndex代表点击的是哪个，从0开始
    console.log(res.cancel, res.tapIndex)
  }
})

• 底部toolbar

• 网络交互

• 用户信息

• 用户电话

• 文件

• 位置信息

• 音乐、视频播放

1、媒体组件：audio和video
2、api

wx.playBackgroundAudio({
  dataUrl:'',//音乐地址，只支持网络路径
  title:'纸短情长-花粥'
  coverImgUrl:'',//专辑封面，只支持网络路径
})
wx.pauseBackgroundAudio()
wx.stopBackgroundAudio()

• 拍照

• 扫码

• nfc

• 小程序支付

• WebView

• 小程序插件

• 一些wiki

1、如果在onload方法中，不是异步的执行一个数据绑定，不需要this.setData用this.data.postData = postData就行。不过用this.setData还是比较保险的方式。
2、快捷键
代码格式化快捷键：alt+shift+f，只能格式化js
wxml用“右键-格式化”来格式化