微信小程式 開發填坑
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;
}