11月2日更新：

微信小程序支持內嵌網頁，新增?<web-view />?組件調試支持： 傳送門

<!-- wxml --> <!-- 指向微信公眾平臺首頁的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>

?

　　

一、小程序的特點：

1:：小程序適合做簡單的，用完即走的應用

2：小程序適合低頻的應用

3：小程序適合性能要求不高的應用

例如：外賣類，電影票類，打車類的應用。

二、小程序組件

1：text

只有text組件內的文本可以被長按選中

text組件可以嵌套使用:

<text>hello <text style='color:red'>你好</text></text>

?

2:swiper組件

swiper-item僅可放置在<swiper/>組件中，寬高自動設置為100%。所以只有設置<swiper/>組件的寬高才行。

<swiper><swiper-item>sweiper1</swiper-item><swiper-item>sweiper2</swiper-item><swiper-item>sweiper3</swiper-item> </swiper>

　　

3:block組件

相當于循環的括號：

<block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"><view data-postId='{{item.postId}}'></view>
</block>

　　

　　

?

?

?

三、小程序自適應單位RPX

邏輯分辨率pt

以iphone6的物理像素750x1344為視覺稿進行設計，而在小程序中以rpx為單位。

iphone6:1px = 1rpx = 0.5pt。

使用rpx，小程序會在不同分辨率下進行轉換，而px不會。

例如：以iphone6的設計圖為基準，如果設計圖的某個元素寬為200px，那么直接設置為200rpx就行。

?注意：字體大小不適合用rpx

?

四、app.json配置問題：

1：pages數組下第一項為啟動頁面

"pages": ["pages/posts/posts", //啟動頁"pages/welcome/welcome"],

?

2：tab欄的配置 例如：

?

"tabBar": {"borderStyle": "white", //邊框顏色"position":"bottom","list": [{"pagePath": "pages/posts/posts","text": "閱讀","iconPath": "images/tab/yuedu.png","selectedIconPath": "images/tab/yuedu_hl.png"},{"pagePath": "pages/movies/movies","text": "電影","iconPath": "images/tab/dianying.png","selectedIconPath": "images/tab/dianying_hl.png"}]}

注意：使用redirecTo()后不會顯示tabbar，必須使用navigateTo()才行

?

?

五：單個頁面的json配置

1:修改頭部導航欄顏色：跟app.json不同的是，單個頁面的json配置只能修改windows對象，所以不需要加windows

{"navigationBarBackgroundColor": "#ddd" }

2：修改單個頁面標題

{"navigationBarTitleText": "消息" }

　　

?

六：頁面的生命周期

1:onLoad

適合放頁面向服務器請求數據的代碼。

this.setData(options)可以將傳入的數據對象直接插入到data對象中（可作用于異步調用），插入的值形式為key:val(不包含整個變量名)。所以我們需要這樣：

this.setData({posts_key:postsData.postList })

當然我們也可以直接為data對象添加一個數據對象 (但是這個方法無法作用于異步操作中，所以不推薦使用)

this.data.posts_key = postsData.postList;

　　

頁面跳轉時，哈希值獲取：

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

　　

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

　　

2: onUnload

同級頁面跳轉時觸發

?

3:onHide

父子級頁面跳轉時觸發

?

4：設置所有生命周期的全局變量：適用于在所有生命周期中可用，在小程序重啟時初始化的變量。

app.js

?

App({globalData:{g_key: "val"} })

?

調用：

var app = getApp() var data = app.globalData.g_key

　　

?

5：小程序的生命周期：后臺是指手機按home鍵時的狀態

/*** 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）*/onLaunch: function () {},/*** 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow*/onShow: function (options) {},/*** 當小程序從前臺進入后臺，會觸發 onHide*/onHide: function () {},/*** 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息*/onError: function (msg) {}

　　

?

?

七：事件

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡

1:頁面向子頁面跳轉(縱向最多只有五級)

bindViewTap: function(){wx.navigateTo({url: '../posts/posts'});}

　　

<view class='moto-container' bindtap="bindViewTap">

　

1:頁面向同級頁面跳轉　

wx.redirectTo({url: '../posts/post' });

　　

八：模塊化 傳送門

引入樣式：使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

@import 'post-item/post-item-template.wxss';

?

九：緩存 ?傳送門

1：8鐘，緩存設置，緩存讀取，清除特定緩存，清除全部緩存。

異步的好處是，執行代碼不會卡在一個地方，會繼續執行接下來的代碼。但是異步的代碼比同步的較難閱讀。（推薦同步）

?

2:真機緩存和調試緩存的沖突問題：

當我們在調試上設置了緩存，然后在真機上測試；之后我們在調試上清除緩存，重新設置緩存值，并再用真機測試，此時真機上的緩存值還是之前的緩存值，沒有被改變。?

解決方法：在應用了添加wx.clearStorage()。

?

十：自定義調用接口函數：

例如新建一個util.js，新建方法并暴露出去

function http(url, callBack) {wx.request({url: url,method: 'GET',header: {"Content-Type": "json"},success: function (res) {callBack(res.data);},fail: function (error) {console.log(error)}}) }module.exports = {http: http }

　　

其他的js文件中引用：

var util = require('../../utils/util.js')

　　

十一：路由切換：

• navigateTo,?redirectTo?只能打開非 tabBar 頁面。
• switchTab?只能打開 tabBar 頁面。
• reLaunch?可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
• 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。

路由跳轉傳遞參數：

先將參數拼在后面

wx.navigateTo({url: '../myBet/myBet?id=1' })

然后我們在跳轉到的頁面的onload方法中，得到傳遞的參數

onLoad: function (options) {console.log(options)}

參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔

?

十二：轉發

1、如何在頁面中使用轉發

onShareAppMessage: function (res) {if (res.from === 'button') {// 來自頁面內轉發按鈕console.log(res)}return {title: '友推',path: '/pages/login/login',success: function (res) {// 轉發成功return},fail: function (res) {// 轉發失敗return}}}

注意：點擊右上角的分享也會觸發這個事件。分享的路徑必須以/pages開頭。

?

2、轉發按鈕如何禁止冒泡

<button class='share' open-type="share" catchtap='onShareAppMessage'>分享</button>

給個catchtap事件就行。當然也可以給button的父元素加。

?

十三：下拉刷新和上拉加載

1、下拉刷新：

onPullDownRefresh: function () {wx.showNavigationBarLoading() // 顯示標題欄的loading效果//模擬加載setTimeout(function () {// completewx.hideNavigationBarLoading() //隱藏loading效果wx.stopPullDownRefresh() //停止下拉刷新}, 1500);}

注意：頁面頂部正中間會有。。。的效果。如果你的小程序背景色沒有設置或者顏色很淡，就會看不到。

設置：我們要在app.json的window配置欄里設置background。

"backgroundColor": "red"

　　

2:上拉加載

小程序沒有給我們封裝上拉加載的組件，所以我們需要自己寫一個加載的動畫組件。

?

十四：優化

1、提高頁面加載速度
2、用戶行為預測
3、減少默認data的大小
4、組件化方案

相關文檔：?微信小程序之提高應用速度小技巧

　　　　　小程序組件化開發框架

注意點

1、小程序現已支持webview

2、調用音樂播放等多媒體功能時，配置的資源必須是網絡上的流媒體文件，而不能用本地的文件。

3、公共組件的引用路徑問題：引用圖片等最好使用絕對路徑( / )

4、event.currentTarget指的是事件捕獲的組件。event.target指的是當前點擊組件。表單輸入的數據可以用event.detail獲取

5、直接在app.json中的pages對象里輸入文件名，保存后就可以自動創建wxml、js、json、wxss四個文件。

6、js中異步插入數據時，最好在data對象中定義一個同名的數據名，不然頁面初始化時找不到這個數據名會報錯

7、往組件中插入值的時候，如果需要插入多個值，可以這樣：

<template is="starsTemplate" data="{{stars:stars, score: average}}" />

8、上拉加載需要使用scroll-view組件，此組件不能使用flex布局。使用豎向滾動時，需要給<scroll-view/>一個固定高度，通過 WXSS 設置 height。例如iphone可設置1336-40,40大概為導航欄的高度。

9、小程序上拉下拉共存時不可使用scroll-view的解決方法　　：

使用bindscrolltolower，必須搭配使用的scroll-view會導致小程序"enablePullDownRefresh": true下拉不能使用。

解決方法，就是當兩者同時存在時，改scroll-view為view，改bindscrolltolower為onReachBottom函數。

注意：下拉刷新需要在window配置欄配置，當數據獲取后需要用wx.stopPullDownRefresh()，滾回頂部。

?

10、配置項下window的backgroundColor屬性，指的是下拉刷新時空出來的窗口，以及頁面切換時的窗口狀態。

11、view不識別\n但是text可以

<view>view \n view</view> <text>text \n text</text>

效果圖：

?12、沒有dom!沒有dom!沒有dom!,綁定數據,控制顯示和隱藏全部用data來修改，就是this.setData({})

?13、request、uploadFile、downloadFile?的最大并發限制是?10?個

　　

轉載于:https://www.cnblogs.com/momozjm/p/7678120.html

總結

以上是生活随笔為你收集整理的微信小程序学习：开发注意点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。