微信小程序開發我的筆記

1，配置文件.json

小程序的全局配置app.json和頁面配置page.json
每單頁頁面也有相應的.json文件，設置每一個頁面中.json配置，會覆蓋與app.json相同的配置項。
以下：是一個包含了全部配置選項的簡單配置app.json

"pages": [//設置頁面的路徑
 "pages/index/index", //不須要寫index.wxml,index.js,index,wxss,框架會自動尋找並整合
"pages/logs/logs" 
],
 "window": { //設置默認窗口的表現形式
"navigationBarBackgroundColor": "#ffffff",//頂部導航欄背景色
 "navigationBarTextStyle": "black",//頂部導航文字的顏色 black/white
 "navigationBarTitleText": "微信接口功能演示", //頂部導航的顯示文字
"backgroundColor": "#eeeeee", //窗口的背景色
"backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式，僅支持 dark/light
"enablePullDownRefresh":"false"，//是否支持下拉刷新 ，不支持的話就直接不寫！
"disableScroll":true,//  設置true不能上下滾動，true/false，注意！只能在page.json中有效，沒法在app.json中設置該項。
}, 
"tabBar": { //底部tab或者頂部tab的表現，是個數組，最少配置2個，最多5個
"list": [{//設置tab的屬性，最少2個，最多5個
 "pagePath": "pages/index/index",//點擊底部tab跳轉的路徑
 "text": "首頁",//tab按鈕上的文字
"iconPath":"../img/a.png",//tab圖片的路徑
  "selectedIconPath": "../img/a.png"//tab在當前頁，也就是選中狀態的路徑
 },   { 
"pagePath": "pages/logs/logs",
 "text": "日誌"
 }] ，
"color":"red",//tab的字體顏色
    "selectedColor":"#673ab7",//當前頁tab的顏色，也就是選中頁的
    "backgroundColor":"#2196f3",//tab的背景色
    "borderStyle":"white",//邊框的顏色 black/white
    "position":"bottom"//tab處於窗口的位置 top/bottom
},
 "networkTimeout": {//默認都是60000秒一分鐘
 "request": 10000,//請求網絡超時時間10000秒
 "downloadFile": 10000，//連接服務器超時時間10000秒
"uploadFile":"10000",//上傳圖片10000秒
"downloadFile":"10000"//下載圖片超時時間10000秒
 }, 
"debug": true//項目上線後，建議關閉此項，或者不寫此項
}

2，邏輯層.js

小程序的邏輯層是js編寫，但由於小程序不是運動在瀏覽器中，因此js在web中的一些功能不能用，如document，windows等 。
app.js有全局的小程序生命週期，page.js有本身本頁面的生命週期

2.1 註冊小程序App.js

注意：
1,必須在app.js中註冊微信小程序，全局只有一個
2,不能再定app（）內的函數中調用getApp（），使用this就能夠拿到app的實例。
3,不要在onLaunch的時候getCurrentPage（），此時page尚未生成
4,經過其餘子頁面調用getApp（）獲取實例後，不要私自調用小程序全局的生命週期方法
5,var app=getApp（）獲取小程序的實例
 App ( {
    // 小程序生命週期的各個階段
    onLaunch: function(){},//當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
    onShow: function(){},//當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
    onHide: function(){},//當小程序從前臺進入後臺隱藏，會觸發 onHide
    onError: function(){},//當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
    // 自定義函數或者屬性，用 this能夠訪問
    ...
})

2.2 註冊小程序的頁面page.js
Page()用來註冊一個頁面，維護該頁面的生命週期以及數據。

Page({
data: {//頁面的初始數據//調用：<view>{{text}}</view> <view>{{array[0].msg}}</view>
 text: 'init data',
 array: [{msg: '1'}, {msg: '2'}]
},
    // 頁面生命週期的各個階段
    onLoad: function(){},//生命週期函數--監聽頁面加載
    onShow: function(){},//生命週期函數--監聽頁面初次渲染完成
    onReady: function(){},//生命週期函數--監聽頁面顯示
    onHide: function(){},//生命週期函數--監聽頁面隱藏
    onUnload: function(){},//生命週期函數--監聽頁面卸載
    onPullDownRefresh: function(){},//頁面相關事件處理函數--監聽用戶下拉動做,須要 在app.json中配置  "enablePullDownRefresh":"true" 容許上拉刷新
    onReachBottom: function(){},//頁面上拉觸底事件的處理函數
    onShareAppMessage: function(){//用戶點擊右上角分享
 return {
      title: '自定義分享標題',
      desc: '自定義分享描述',
      path: '/page/user?id=123'
    }
},

    // 自定義函數或者屬性如：
  customData: { hi: 'MINA' }
    ...
})

2.3，注意事項
setData（）
不能直接數據 ，this.data.text="xxxxx" //這是錯誤的，
this.setData ({ //在這裏面修改數據的值，和react的setdata有些相似})//這是正確的
這裏記住this有做用域的問題 ，如在局部函數中使用需.bind(this),或其餘

getApp（）
若是須要全局的數據能夠在app.js中設置。如：

App({// app.js
  globalData: 1
})
// 某page.js
console.log(getApp().globalData)

2.4，公共模塊util.js
公共模塊方法須要經過module.exports對外暴露接口。
使用的時候須要require(path)將文件引入。如：

function sayHello(name) {//公共方法util類
  console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello//用module.exports 對外暴露接口

 

//先引入文件，是新建的一個utils包，公共方法在util.js裏面
var util = require('../../utils/util.js')
Page({//調用類
  onLoad: function () {//  使用時，用util引用名調用，如：util.sayHello（）
 util.sayHello('我是傳的值');
  }
})

3，視圖層WXML

視圖層的數據綁定 均來自於Page中的data，修改值則是this.setData
數據綁定使用{{變量}}雙大括號將變量包起來

**條件渲染**
 <view wx:if="{{zhenjiaa=='123'}}">123334</view>
 <view wx:if="{{zhanjia}}">123334</view> 
<view wx:if="{{len > 5}}">大於5我就顯示了 </view>

//這是一個if if else的判斷
<view wx:if="{{length > 5}}"> 1 </view>//若是大於5顯示1
<view wx:elif="{{length > 2}}"> 2 </view>//不然若是大於2顯示2
<view wx:else> 3 </view>//不然顯示3

<block wx:if="{{true}}">//block只是一個包裝元素，並不會在頁面上作任何渲染，只受屬性控制。
  <view> view1 </view>
  <view> view2 </view>
</block>
wx:if vs hidden
wx:if 是惰性的，運行時不渲染，
《hidden 組件始終渲染，只是簡單的顯示隱藏，若是須要頻繁切換則用hidden》



**列表渲染** 
 view wx:for="{{array}}"> {{index}}:{{item}} </view>//默認index是當前下標的變量名，數組當前項是item，若是是object類型則是item.xxx
也能夠另取名用wx：for-index=「xx」來指定當前數組下標的變量名
            wx：for-item="xx" 來指定當前元素的變量名 
//輸出的結果是0:1,1:2,2:3,3:4,4:5
  page.jsPage({ data: { array: [1, 2, 3, 4, 5] }}) 
  block wx:for
相似block wx:if，也能夠將wx:for用在<block/>標籤上
**wx：kay **
若是列表中的項須要動態添加到列表中，並但願項目保持原有的特徵和狀態使用wx:kay
wx:kay 有兩種形式提供
1，字符串  wx:kay=「unique」
2，保留關鍵字 wx:kay="*this"


**算法運算**
<view> {{a + b}} + {{c}} + d </view>

**字符串運算**
<view>{{"hello" + name}}</view>


也能夠用擴展運算符 ... 來將一個對象展開
{{...obj1}} //a:1,b:2   能夠把obj對象徹底展開
obj1: {
      a: 1,
      b: 2
    },
注意：上述方式能夠隨意組合，可是若有存在變量名相同的狀況，後邊的會覆蓋前面

.1，wxml模版的使用
name定義組件模版的名稱，引用模版的時候使用is屬性指定模版的名字，is能夠進行簡單的三木運算。須要傳入模版須要的data數據。由於模版擁有本身的做用域，因此只能使用data傳入數據，而不能直接{{}}使用。

<template name="msgItem">// 某個模板
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
----------------------------------
使用時：
<template is="msgItem" data="{{...item}}"/>//data裏面須要傳入name爲msgItem 模板中所須要的值

3.2，WXML公共模塊的引用
WXML提供兩種文件引用方式1，import 。 2，include

以下:

import有做用域的概念，不能夠A import C,能夠A import B,
<!-- B.wxml -->
<import src="a.wxml"/>//使用import標籤

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

include能夠多重引用
<include src="header.wxml"/>//引用header、其中header.wxml中也引用了footer.wxml
<view> body </view>

<!-- header.wxml -->
<view> header </view>
<include src="footer.wxml"/>

3.2，事件
1， bind開頭不阻止冒泡，用catch開頭能夠阻止冒泡。如catchtap～
冒泡的定義：點擊子組件會觸發父組件，全部父組件，先子後父的觸發
2，無特殊狀況自帶事件的各個事件對象以及對象屬性列表
3，dataset，在wxml組件中能夠定義data數據，會經過事件傳遞。以data-開頭，多個單詞覺得-連接，如data-a-b，可是不能有大寫，它會自動轉成駝峯命名，調取的時候去駝峯命名的名字。

4， wxss

用法相似於css，擴展尺寸單位和樣式導入
1，尺寸單位rpx，1rpx=0.5px。
2，樣式導入。以逗號結束。
@import "common.wxss";//引入的時候import後面跟引入文件的相對路徑
可使用內聯樣式，但不建議，會影響渲染速度。
page.wxss的樣式會覆蓋全局樣式app.wxss

5，組件

1，全部組件和屬性都是小寫，以-鏈接
2，image默認寬300px高度225px
3，~~和html相似（巴拉巴拉）

**navigator至關於a標籤**
<navigator url="../index/index">點擊跳轉不關閉當前頁面</navigator>
<navigator url="../logs/logs" redirect="true" >點擊跳轉關閉當前頁面</navigator>