微信小程序开发填坑

1，json文件里不能使用备注，否则编辑会报错

2.如果图片未指定高宽，小程序会有一个默认的值。image组件默认宽度300px、高度225px

3.只有使用text组件包裹的文字，才能在手机端长按选中

4.缓存数据大小不能超过10M

5.对swiper-item设置高宽是不起作用的，必须设置在它的父容器上swiper才可以。swiper-item自动继承父容器的宽高的100%

6.在程序的app.json里，是可以对page,window…进行配置，但是在具体分页面的json里是只能对window进行配置的。所以不需要在套一层windowl了

这里写图片描述

7.在属性中如果要绑定flase的布尔值，需要用双花括号包裹，否则会认为为true

<text wx:if="{{flase}}" class='post-title'>{{title}}</text>

8.，在小程序里，如果要使用另一个js里的数据，需要在在另一个js里exports 一下

var local_database = [
  {
    date: 'sep 18 2016',

  },
]
module.exports = {
  postList: local_database
}

注意：这里一定要使用相对路径

// pages/posts/posts.js
var postData=require('../../data/posts-data.js')

9.获取url参数

 wx.navigateTo({
      url: '../posts/post-detail/post-detail?id=' + postId

    });

Page({
    data: {},
    onLoad: function onLoad(option) {
        var postId = option.id;
        this.data.currentPostId = postId;
        var postData = postsData.postList[postId]; //
        this.setData({
            postData: postsData.postList[postId]
        });

    },
})

10.数据赋值

如果是同步数据赋值。可以直接使用this.data=xxx;

  onLoad:function(option){
         var postId = option.id;
         this.data.currentPostId=postId;
   })

异步数据:this.setData

 onLoad:function(option){
         var postId = option.id;
         this.data.currentPostId=postId;
         this.setData({
             postData:postsData.postList[postId]
        });
   })

同步数据也可使用this.setData,但是尽量使用this.data，因为如果是使用this.setData。有可能onLoad（页面初始化）已经结束，但是this.setData还没执行完毕。

11.全局变量的使用

有些数据被不同的页面所使用，但是如果使用缓存会存在一定的问题。因为即使用户退出，缓存依然会被保存下来。所以，这就需要用到全局变量。
在app.js:

App({
    globalData:{   
        g_isPlayingMusic:false,
        g_currentMusicPostId:null,
        doubanBase: "https://api.douban.com",
    }
})

具体页面js:

var app = getApp();//先获取对象
console.log(app.globalData.g_isPlayingMusic);//使用
app.globalData.g_isPlayingMusic =true;//修改

12.设置置顶栏文字内容

wx.setNavigationBarTitle({
  text: 'hello, world!'
})

如果把这句代码直接写到页面onLoad方法里，会不起作用。
原因：因为onLoad生命周期内，无法操作页面UI,
解决：放在oneady方法中

// a/a.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    wx.setNavigationBarTitle({
      text: 'hello, world!'
    })
  },

})

13.上拉加载scroll-view，一定要指定高度，这样才会触发bindscrolltolower方法

 <scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
    <block wx:for="{{movieList}}" wx:for-item="movie">
      <view class="single-view-container">
        <template is="movieTemplate" data="{{...movie}}" />
      </view>
    </block>
  </scroll-view>

.grid-container{
    height: 1300rpx;
    margin:40rpx 0 40rpx 6rpx;
}

微信小程序 开发填坑

猜你喜欢

微信小程序开发填坑