Wx小程序開發

微信小程序開發文檔：https://www.w3cschool.cn/weixinapp/sp6z1q8q.html

微信小程序前端源碼邏輯和工作流：https://www.cnblogs.com/dupd/p/5905880.html

小程序官方示例Demo

一、小程序的生命周期

????? ?1.小程序啟動

??????????????小程序啟動之后，在?app.js?定義的?App?實例的?onLaunch?回調會被執行:

???????????????整個小程序只有一個 App 實例，是全部頁面共享的，App實例相當于?android里的application。

????? ?2.渲染界面

????????????? ? 微信客戶端首先會根據page.json生成一個界面

????????????????接著客戶端就會裝載這個頁面的?WXML?結構和?WXSS?樣式。最后客戶端會裝載?logs.js

????????????? ?在渲染完界面之后，頁面實例就會收到一個?onLoad?的回調(page.js)，你可以在這個回調處理你的邏輯。??

二、綁定View的點擊事件

????? ?通過bindtap='methodName'，在js里實現點擊事件

????方法實現方式1
????//?methodName:function(e){
????
????//?}
????
????方法實現方式2
????methodName(){
????????wx.navigateTo({
????????url:?'../net/net',
????????})
????}

????? ?

?????

????????

三、頁面跳轉

• 添加新頁面

  注意js文件里的page首字母要大寫 ? ?????
  

????????https://jingyan.baidu.com/article/6f2f55a1656e01b5b93e6c9e.html

????????

????????//跨頁面傳值

????????https://www.ifanr.com/minapp/878030

????????

四、組件樣式

????????https://www.cnblogs.com/yang-shuai/p/6899430.html

????1.CSS選擇器

????????1）標簽選擇器

????????2）選擇器分組 （共享聲明）

????????3）派生選擇器? （標簽的子級標簽的樣式）

????????4）?id選擇器? （不針對具體的標簽）

????????????? #選擇器名{}

????????5）?id選擇器結合派生選擇器

????????6） 類選擇器

????????????? .選擇器名{}

? ? ? ? 7）屬性選擇器

???????????? [屬性名]{}

????????8)? 屬性和值選擇器

? ? ? ? ? ? ?[屬性名=屬性值]{}

????????? ? ?[屬性名~=屬性值]{}??????????//屬性包含屬性值

????????? ? ?[屬性名｜=屬性值]{}??????????//屬性包含屬性值的另一種表現形式

???????????? 標簽名[] {}????????????????????????//具體標簽的屬性選擇器

?????????

????????id選擇器與類選擇器的區別：

????????????? 1）id選擇器一個wxml中只能出現一次，但是class可以多次。

????????????? 2）類選擇器可以合并

??????????????????<div class ="class1 class2 class2"></div>也就是說class可以等于多個class的列表
????????????????? 對于id來講 id="div1" 而不能寫成id = "div1 div2"這樣，即只能有一個id，而不是像class屬性那樣

????????????????

????? ? 如何關聯樣式表：

??????????????@import "other.wxss";

? ? ?2.布局? ?

????????Flex布局：https://blog.csdn.net/qq_26585943/article/details/79694792

????????????????????????所有的View都是一個Flex，可以設置作為父容器的屬性或作為子容器的屬性。

????????布局實戰：https://blog.csdn.net/aoaoxiexie/article/details/53991432

?????

????????

五、網絡請求

????????https://blog.csdn.net/suixufeng/article/details/65445751

????? ?

六、藍牙操作

????????https://www.cnblogs.com/qcloud1001/p/7717860.html

????????

????????https://www.jianshu.com/p/1fc23fc7e5ce

????????

七、變量

? ? ? ?1) let與var定義變量的區別：https://www.jianshu.com/p/e62d4ee72a61

????????

????? ?2)變量定義

????? ? ? 數組定義? 變量名:[]

????????? 對象定義? 變量名:{}

???????

????? ?3)變量賦值

????????? https://blog.csdn.net/weixin_41991473/article/details/79927418

??????????

????????? 賦值異常："Setting data field "content" to undefined is invalid" 錯誤，原因是賦值的值與變量的類型不一致。

????????

? 七-2、方法

???????? 1）當前js調用另外js的方法

????????????????var api = require("../demo/api_test/api_test.js");

????????????? ? 調用api即可獲取api_test.js里定義的方法，但是api_test.js的方法先要聲明暴露出來。

????? ? 2）當前js調用當前js的方法

????????????? ? this.方法名(),直接使用方法名會報方法找不到。

? ? ? ? ?3）wx.xx方法的callback里調用自定義的方法

????????????????直接調用會報錯：

????????????????你要調用的自己的自定義方法?not defined;at api callback function

????????????????如：

????????Page({
????????????data:?{
?????????????
????????????},
????????????getConnectedDevices(){
????????????????console.log('getConnectedDevices?start')
????????????????wx.getConnectedBluetoothDevices({
????????????????services:?[],
????????????????success:?function(res)?{
????????????????console.log('getConnectedDevices?success',res)
????????????????},
????????????????fail:function(res){
????????????????console.log('getConnectedDevices?fail',?res)
????????????????}
????????????????})
????????????},
????????????
???????????initAdapter(){
????????????var?that?=?this;
????????????console.log('initAdapter?start')
????????????
????????????wx.openBluetoothAdapter({
????????????success:?function(res)?{
????????????console.log('initAdapter?succes',?res)
????????????that.getConnectedDevices();
????????????},
????????????fail:function(res){
????????????console.log('initAdapter?fail',res)
????????????}
????????????})
},?
????????｝
????????）

????????????????上面，initAdapter方法里，如果直接調用getConnectedDevices就會報錯。但是用that在initAdaper方法賦值一下this再調用getConnectedDevices就正常。

????????????? ? ?

八、數組

????? ?合并清空數組? https://www.jianshu.com/p/cd08d01a1c9c

????????增刪改查????https://www.jb51.net/article/102160.htm

????????????????????????????

????????push和concat的區別：

????????https://blog.csdn.net/wangsf789/article/details/53466314

????????ArrayBuffer與Java數據類型

????? ??http://www.majianwei.com/archives/6420

????????其實微信小程序與Java程序通訊，如果遇到了ArrayBuffer類型，JS可以將ArrayBuffer轉換成HexString類型，Java再將HexString轉byte[]（也就是ArrayBuffer）。

????????

八-1：對象

????????1.錯誤的賦值方法：

????????? ?對象內部無法引用自身的屬性

smallFrame.push({????
????"ST":?"33",
????"SN":?codetool.num2Hex(sn,1)?,
????"CTL":?calCTL(sendDataArray.length?-?1?-?i,?i?==?0???1?:?0),
????"LEN":?codetool.num2Hex(sendDataArray[i].length?/?2,1),
????"DATA":?sendDataArray[i],
????"BCC":?codetool.yihuo(this.SN?+?this.CTL?+?this.LEN?+?this.DATA),
????"FRAME":?(this.ST?+?this.SN?+?this.CTL?+?this.LEN?+?this.DATA?+?this.BCC)
????});

? ? ? ? ?正確的賦值方法：

for????(let?i?=0;i?<?sendDataArray.length;i++){
????let?item?=?{
????"ST":?"33",
????"SN":?codetool.num2Hex(sn,?1),
????"CTL":?calCTL(sendDataArray.length?-?1?-?i,?i?==?0???1?:?0),
????"LEN":?codetool.num2Hex(sendDataArray[i].length?/?2,?1),
????"DATA":?sendDataArray[i],
????"BCC":?"",
????"FRAME":?""
????};
????item.BCC?=?codetool.yihuo(item.SN?+?item.CTL?+?item.LEN?+?item.DATA);
????item.FRAME?=?item.ST?+?item.SN?+?item.CTL?+?item.LEN?+?item.DATA?+?item.BCC;

? ? ? ? 2. 讀取一個undefined對象的屬性異常

????????? ??Cannot read property 'sendResultListener' of undefined

????????

九、列表組件

????????https://www.cnblogs.com/yexiaochai/p/9431816.html

????????https://blog.csdn.net/qq_38614249/article/details/80913311

?????

????? ?點擊事件，通過自定義屬性傳值：

????????https://blog.csdn.net/qq_41999617/article/details/83449841

????????

???

十：關鍵字

????????1）this和that：http://www.php.cn/xiaochengxu-353027.html

????????????????????????????????https://blog.csdn.net/lucky123star/article/details/77508360

????????????

???????????? 在嵌套的方法里，一般不直接使用this。可以定義一個that=this，然后調用that。

? ? ? ? 2）在自定義的js里使用var that = this，然后調用that會提示undefined ?????

????????

十一：工具類封裝

????? ? 1）? http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2461

? ? ? ? 2）? 模塊化：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html?（官方）

????????? ? ? ?

????????????? ?變量如何暴露： 定義方法返回變量，然后暴露方法。

????????????????

????????????????注意js只能暴露方法，無法直接暴露變量，但是可以通過方法返回變量。

????????? 3）定義監聽回調

? ? ? ? ? ? ? ? ?形式1：監聽對象為一個函數function

???????????????? 形式2：監聽對象為一個對象?{},然后調用對象的相關函數。

??????????https://www.cnblogs.com/bellagao/p/6305485.html

????????? ?4）wxml中使用自定義的函數：https://blog.csdn.net/qq_35971258/article/details/85197664

????????? ?5）base64與arraybuffer互轉：https://www.hishop.com.cn/xiaocx/show_48059.html

????????? ?6）

十二、微信小程序特殊語法：

???????? 1、KV傳參：

????????????? wx的某些api，傳入參數，可能會提示：

????????????????? ?

????????????? ?如：
????????????????

?????????wx.getBLEDeviceCharacteristics({????????
????????????????deviceId,
????????????????serviceId:?blecofig.getBleServiceId(),
????????????????success(res)?{
????????????????console.log('device?getBLEDeviceCharacteristics:',?res.characteristics)
????????????????}
????????})

??????????????getBLEDeviceCharacteristics的第二個參數?serviceId，如果參數的類型不明確，就要用KV形式傳入參數。

????????

十三：編碼

????????1.ArrayBuffer與字符串互轉

????????????????https://blog.csdn.net/xyzdwf/article/details/82220987

? ? ? ? 2.進制轉換

????????????????https://blog.csdn.net/sinat_22038331/article/details/85861708

????????

????????????????注意16進制轉10進制時，調用parseInt函數，但是傳入的參數必須是以"0x"開頭的。否則會出現問題，如傳入1A，結果計算為1.

?????????

十四:異步處理

?????????https://blog.csdn.net/txqd1989/article/details/79096598/

十五：下載

????????https://blog.csdn.net/csl125/article/details/79206525

十六：音頻

• ?關于播放進度獲取的問題

  小程序的innerAudioContext的onTimeUpdate事件返回值為undefined

  
  

? ?????

十七：Wifi

• wx.getWifiList報錯(沒有聲明權限)?https://blog.csdn.net/weixin_43282511/article/details/89881143

#######第3方庫：############

????????1.protobuf協議

????????????????https://blog.csdn.net/d7185540/article/details/85105758

?????????????? ?上面的方法可以把proto轉換成json，但是下面如何使用？？？

? ? ? ?2.https://blog.csdn.net/zuochao_2013/article/details/54563993?（各種框架和源碼）

? ?

????

1. 微信小程序之綁定點擊事件
   

2. https://blog.csdn.net/yanglei0917/article/details/70171921

3. 吐司

   https://blog.csdn.net/hedong_77/article/details/54948537

? 微信小程序給wx.showToast 更換圖標 icon 種類

?????http://www.pianshen.com/article/7528213664/

???????

1. 調試

   console.log(res)，在開發工具上掃描“遠程調試”按鈕生成的二維碼，即可在console里看見日志 。

2. 羅盤Demo

   https://cloud.tencent.com/developer/article/1367259

????