小程式開發所遇的問題以及一些小細節

1.基本知識

bindtap （冒泡）
catchtap （防止冒泡）
catchtouchmove
e.currentTarget.dataset.index(data- 裡面使用的定義)
import { apiV1 } from '../../utils/util';
e.detail.current（swiper裡面使用的屬性，e.detail / current）

根據官方文件的對應的元件，api，其有它的對應屬性可以使用，而e.detail/e.target/e.currentTarget/e.currentTarget.dataset是表示一個物件，後面跟著欄位

2. 點選圖示變化

3．點選直接跳轉

4. 相當js原生定義一個元素（這個是data-屬性）

5.檢視除錯資訊，初學者最好開啟容易看到debug

6.哪個檔案放在這就哪個檔案是專案啟動時出現的首頁

7.定義獲取全域性變數

8.SetData用法：

9.跳轉頁面後設定的返回功能（點選後返回）

10.需要裝nodejs才生效require

11.放common公共模組盒，其他頁面可以require common.js/a.js裡面的函式事件或其他，common.js也可以require a.js

可以在其他頁面中引用這commonjs檔案

12.獲取後臺資料，在前端中渲染資料出來：

（其中api是指封裝好的獲取介面的寫法，URL_INDEX已定義是介面路徑）

13.呼叫全域性方法

14.頁面生命週期

15.佈局基礎（盒模型flex）

父級用了display:flex;子級也會用到，不影響
換行與不換行flex-wrap

對齊方法justify-content

flex-grow(在空間剩餘前提下，可以設定擴充套件，來擴大某個元素的範圍)

flex-shrink（在空間不足前提下，可以設定等比縮放）

16.全域性app.js

注意：

補充：

image元件不能像jq一樣用alt（載入前出現的圖片）
進度條元件設定不了橢圓樣式
載入小程式專案時出現的後臺獲取json資料獲取不出時，出現空白，不能解決

17.繫結資料判斷

從orderList.js頁面裡的拼團中訂單跳轉到orderGroup.js中，它頁面的介面需要設定orderid為某條資料的具體值，才能顯示資料出來

溫馨提示：

關於上拉載入資料，需要頁碼page/offset，設定在wx.request（相當公司的api中）的data中：
在js中的data設定一個pageNo初始值為1，然後在wx.request前面設定this.data.pageNo++，然後在wx.request的data中設定page:this.data.pageNo;然後設定this.setData({pageNo:this.data.pageNo})

注意一點：看公司的需求介面網站的接收引數和返回引數（接收引數一般是在wx.request中的data定義目的為了可以返回引數--有時需要做到這步才能獲取到資料）

關於規格那出現的小問題：
當wx:if在最外面，而它裡面也有一個wx:for，隱藏部分的應該全放在wx:for裡面

注意：一處不能同時定義兩個不能點選事件的動畫animation="{{}}"

18.onPullDownRefresh 下拉重新整理

onPullDownRefresh: function () {
// 下拉重新整理
wx.stopPullDownRefresh();
},

19.獲取使用者資訊wx.userInof

20.wx.request中的data裡面傳值

21.介面資料為全域性，呼叫渲染後可以重用（全域性與區域性的區別）

Wxml

js:data

事件/介面

22.跳轉事件判斷（說明的就是這部分）

23.微信支付介面和確認收貨

24.上拉載入更多（上拉觸發）

https://coding.net/u/toBeMN/p/MINA-imitate-cnode-community/git（借鑑別人文章--有類似專案在這）

http://www.wxappclub.com/topic/384（借鑑別人文章）

Wxml 和js

專案的例子

wxml

js

25.動畫 淡入淡出和彈跳

結合顯示隱藏來設定淡入

補充：

一個step代表一組動畫，可以在一組動畫設定多個動畫

可以這樣表示

啟動彈起(相同的動畫，也需要在相對應的位置繫結不同的animation)

補充：

26.倒數計時

設定多個倒數計時，可能用不了陣列來設定，需要分開設定

27.遮罩背後不動，用到catchtouchstart事件

阻止彈窗時背後不要動

wxml

data

函式事件

27.setInterval與clearInterval

載入的圖示顯示

scroll-view縱向滾動還有點選錨點
wxml

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green" style="background:red;"></view>
<view id="red" class="scroll-view-item bc_red" style="background:yellow;"></view>
<view id="yellow" class="scroll-view-item bc_yellow" style="background:skyblue;"></view>
<view id="blue" class="scroll-view-item bc_blue" style="background:green;"></view>
</scroll-view>
<view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
//滾動條滾到頂部的時候觸發
upper: function (e) {
console.log(e)
},
//滾動條滾到底部的時候觸發
lower: function (e) {
console.log(e)},
//滾動條滾動後觸發
scroll: function (e) {
console.log(e)},
//點選按鈕切換到下一個view
tap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (order === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
//通過設定滾動條位置實現畫面滾動
tapMove: function (e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'green',
scrollTop: 100,
scrollLeft: 0
},
//滾動條滾到頂部的時候觸發
upper: function (e) {
console.log(e)
},
//滾動條滾到底部的時候觸發
lower: function (e) {
console.log(e)
},
//滾動條滾動後觸發
scroll: function (e) {
console.log(e)
},
//點選按鈕切換到下一個view
tap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (order === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
//通過設定滾動條位置實現畫面滾動
tapMove: function (e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})

image.png

28.顯示人物頭像和名稱 彈窗提醒

wxml

js

var util = require('../../utils/util.js')
import { URL_SHOP_TIPS} from '../../utils/urls';
import { api } from '../../utils/util';
Page({
data: {
// logs: [],
orderDatas:[],
nickname:'',
headimg:'',
isShowTips:false
},
onLoad: function () {
// this.setData({
// logs: (wx.getStorageSync('logs') || []).map(function (log) {
// return util.formatTime(new Date(log))
// })
// })
this.showNoticTip();
},
showNoticTip:function(){
let that = this;
setTimeout(function () {
that.setData({
isShowTips: false
})
}, 5000)
let tempdata=this.data.orderDatas;
if(tempdata.length==0){
api(URL_SHOP_TIPS, { pagetype: 1 }, data => {
let tempdata = data.data;
if (tempdata) {
let n = Math.random();
let index = Math.floor(tempdata.length * n);
let orderdata = tempdata[index];
tempdata.splice(index, 1);
this.setData({
orderDatas: tempdata,
nickname: orderdata.nickname,
headimg: orderdata.headimg,
isShowTips: true
})
}
}, true, false)
}else{
let n = Math.random();
let index = Math.floor(tempdata.length * n);
let orderdata=tempdata[index];
//刪除當前顯示的資料
tempdata.splice(index,1);
this.setData({
orderDatas: tempdata,
nickname: orderdata.nickname,
headimg: orderdata.headimg,
isShowTips: true
})
}
setTimeout(function(){
that.showNoticTip();
},6000)
}
})

29.在wxfor設定的同一個結構佈局，可對應算出不同的時間戳

wxml

js

30.詳情頁跳轉url

（使用data-區別它們之間的跳轉標識）

補充說明：

只能分享給朋友，不能分享朋友圈；可以新增到手機桌面，只是相當快捷鍵

window相當於wx

31.跳轉頁面設定

32.用setData強制改變資料

33.專案的預覽按鈕只有註冊了appID才能預覽

34.路徑設定

視窗window、tabBar底部

（在pages這定義新建的資料夾，自動新建）
檔案內不能新增註釋行

注意

35.生命週期函式

36.頁面相關事件處理函式

（下拉重新整理，使用者轉發）

37.App.json定義的頭部標題和底部導航

38.輪播

39.載入loading

40.scroll-view/scroll-x(滾動條橫縱向滑動)

注意：

使用豎向滾動scroll-y需要設定高度height

41.資料請求wx.request（相當ajax）

42.說明：this.setData相當return

movable-view/movable-area

注意：

movable-view必須在<movable-area/>元件中，並且必須是直接子節點，否則不能移動。

43.轉發

44.點選事件

45.icon小圖示

46.text文字（動態增加刪除元素）

47.progress進度條

48.button按鈕

49.checkbox多選按鈕

50.from表單

51.input輸入框

（有一處用到相當vue中的v-model雙向資料繫結）

52.label標籤

53.客服

（客服設定的賬號，是在微信小程式平臺註冊後登入設定就好）

官方文件這部分資料目的是說明當使用者傳送訊息自動生成的json資料

54.事件

55.時間戳（時間相差值，幾時幾分幾秒）

補充：

56.獲取後臺json資料的區別

（本人的理解：jq和小程式的區別）

JQ :

ajax獲取資料，用$.ajax，都在js中獲取到的資料，獲取到的資料在ajax中，用類別定義對應的元素獲取後臺的相對應json欄位

小程式:

wx.require獲取資料 當用到多個類似結構資料。可以用wx.for={{arry}}，在data定義一個陣列，data:{ arry:{} },然後在後面的onload(也可以放在其他的全域性函式內)中用wx.require定義tempdata=data.product(這個product是後臺的json資料的名字，這可以改變)，然後需要獲取欄位，就在this.setdata那改變arry：tempdata (跟jq不同是，在wxml中已經用 arry.物件 形式表示了，不需要在js中的wx.require中再用類別分明對應不同元素位置插入相對應的元素欄位)

57.commodity收藏（是否已收藏）

直接在頁面中判斷是否收藏，而改變它的圖片路徑

58.從本地快取中同步修改指定 key 對應的內容

本文作者lilyping
越努力，越幸運
原文連結：https://www.jianshu.com/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos原始碼地址：https://github.com/lilyping