微信小程式

-百度人工智能介面的探索

---

---

前言

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、微信小程式是什么？

微信小程式，小程式的一種，英文名Wechat Mini Program，是一種不需要下載安裝即可使用的應用，它實作了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用，全面開放申請后，主體型別為企業、政府、媒體、其他組織或個人的開發者，均可申請注冊小程式

---

二、小程式的基本認識

1.小程式注冊與工具說明

（1）：小程式注冊官網

鏈接: 微信注冊

（2）頁面如下

（3）微信小程式的工具—微信開發者工具

---

2.微信開發者工具的使用

(1)： 實體如下（示例）：

(2):說明：最上層是選單欄：功能有引入檔案，界面設定，編輯等等；接著下面這層是工具列：顯示控制臺，進行真機除錯，然后后面的模擬器，編輯器，調控器在后面的學習中會有更深的認識，

---

3：創建完成后的小程式頁面基本認識

(1) 頁面展示

TYPE	說明
pages	目錄，存放所有的小程式頁面
utils	放在小程式中的工具函式
app.js	小程式的邏輯
app.json	小程式的公共配置
app.wxss	小程式的公共樣式
poject.config.json	開發者工具組態檔

TYPE	page頁面
home.js	頁面邏輯，存放函式
home.wxss	頁面樣式
home.json	頁面配置
home.wxml	頁面結構

{"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
//1. pages pages 欄位??于描述當前?程式所有??路徑，這是為了讓微信客?端知道當前你的?程式
//??定義在哪個?錄，
//2. window window 欄位?定義?程式所有??的頂部背景顏?，?字顏?定義等，
//3.完整的配置資訊請參考app.json配置

---

---

4:掃碼介面 微信開發檔案的簡單介紹

（ 1）：微信開發檔案
鏈接: 微信開發檔案網址

(2):內容

(2):總結：
小程式的主要開發語言是 JavaScript ，小程式的開發同普通的網頁開發相比有很大的相似性，對于前端開發者而言，從網頁開發遷移到小程式的開發成本并不高，但是二者還是有些許區別的，
? 網頁開發渲染執行緒和腳本執行緒是互斥的，這也是為什么長時間的腳本運行可能會導致頁面失去回應，而在小程式中，二者是分開的，分別運行在不同的執行緒中，網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API，進行 DOM 選中和操作，而如上文所述，小程式的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，并沒有一個完整瀏覽器物件，因而缺少相關的DOM API和BOM API，這一區別導致了前端開發非常熟悉的一些庫，例如 jQuery、 Zepto 等，在小程式中是無法運行的，同時 JSCore 的環境同 NodeJS 環境也是不盡相同，所以一些 NPM 的包在小程式中也是無法運行的，

---

三、小程式的基本語法

1：基本語法

1-1 資料系結

<view> {{ message }} </view>
//輸出 hello MINA！

 Page({
data: {
message: 'Hello MINA!'
}
})

1-2 組件屬性

<view id="item-{{id}}"> </view>

Page({
data: {
id: 0
}
})

1-3 bool型別

<checkbox checked="{{bool}}"> </checkbox>

Page({
data: {
bool: true 
}
})

---

## 2：運算 ### 2-1 三元運算式 ```c oBth.οnclick=function(){ oUl.style.display == "block" ? oUl.style.display="none" : oUl.style.display="block" } ``` 解釋：如果oUl.style.display == "block"是真的，就執行oUl.style.display="none" 否則就執行：后面的 oUl.style.display="block"

2-2 算數運算

<view> {{a * b}} + {{c}} + 5 </view>
//1*2+3+5=10

Page({
data: {
a: 1,
b: 2,
c: 3
}
})

2-3 邏輯判斷

<view wx:if="{{length > 5}}"> </view>

2-4 字串運算

<view>{{"hello" + name}}</view>

Page({
data:{
name: 'MINA'
}
})

---

## 3： 渲染 ## 3-1 串列渲染  ```c {{index}}: {{item.message}}

```c
Page({
data: {
array: [{
id:0,
message: 'first',
}, {
id:1,
message: 'second'
}]
}
})

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
染?個包含多節點的結構塊block最終不會變成真正的dom元素

3-2 條件渲染

在框架中，使? wx:if="{{condition}}" wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
<view hidden="{{condition}}"> True </view>

類似 wx:if wx:if
頻繁切換? hidden

---

## 4：?程式中系結事件 ### 4-1 wxml ?程式中系結事件，通過bind關鍵字來實作，如 bindtap bindtap bindinput bindinput bindchange bindchange 不同的組件?持不同的事件，具體看組件的說明即可， ```c ``` ```c Page({ // 系結的事件 handleInput: function(res) { console.log(res); } }) ``` 注意: 1.系結事件時不能帶引數不能帶括號以下為錯誤寫法;

2:事件傳值通過標簽?定義屬性的?式和 valu

bindinput="handleInput(引數) 錯誤的表達
<input bindinput="handleInput(引數)" data-item="100" />

3:事件觸發時獲取資料

handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 輸入框的值
console.log(e.detail.value);
}

5: wxss 微信小程式樣式

簡介：WXSS( WeiXin Style Sheets WeiXin Style Sheets )是?套樣式語?，?于描述 WXML WXML 的組件樣式，
與CSS相?，WXSS擴展的特性有：
回應式?度單位rpx rpx
樣式導?

5-1 尺?單位

rpx rpx （responsivepixel）:可以根據螢屏寬度進??適應，規定螢屏寬為 750rpx 750rpx ，如在
iPhone6 iPhone6 上，螢屏寬度為 375px 375px ，共有750個物理像素，則 750rpx = 375px = 750 750rpx = 375px = 750物理像 物理像素 ，1rpx = 0.5px = 11rpx = 0.5px = 1物理像素 物理像素 ，

5-2 選擇器

選擇器 樣例 樣例描述
|
全域樣式與區域樣式
定義在 app.wxss 中的樣式為全域樣式，作用于每一個頁面，在 page 的 wxss 檔案中定義的樣式為區域樣式，只作用在對應的頁面，并會覆寫 app.wxss 中相同的選擇器，

5-3 ?程式中使?less

原??程式不?持 less less ，其他基于?程式的框架?體都?持，如 wepy wepy ， mpvue mpvue ， taro taro 等，
但是僅僅因為?個less功能，?去引??個框架，肯定是不可取的，因此可以?以下?式來實作
1.編輯器是 vscode vscode
2.安裝插件 easy less easy

---

6： 組件

6-1 常用組件

組件	組件
view	button
text	image
rich- -text	navigator
swiper	icon
radio	checkbox

view:代替原來的 div 標簽

<view hover-class="h-class">
點擊我試試
</view>

text :
1.?本標簽
2.只能嵌套text
3.?按?字可以復制（只有該標簽有這個功能）
4.可以對空格回?進?編碼

<text selectable="{{false}}" decode="{{false}}">
普&nbsp;通
</text>

image:
1.圖?標簽，image組件默認寬度320px、?度240px
2.?持懶加載

mode有13種模式，其中4種是縮放模式，9種是裁剪模式，

swiper/swiper-item:

navigator:

rich-text:
可以將字串決議成對應標簽，類似vue中v- -html 功能
其中rich-text節點中nodes系結的就是我們的內容

// 1 index.wxml 加載 節點陣列
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加載 字串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
// index.js
Page({
data: {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello&nbsp;World!'
}]
}]
},
tap() {
console.log('tap')
}
})

button


opem-type

<button
type="default"
size="{{defaultSize}}"
loading="{{loading}}"
plain="{{plain}}"
>
</button>

icon:

Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
}
})

<view class="group">
<block wx:for="{{iconSize}}">
<icon type="success" size="{{item}}"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconType}}">
<icon type="{{item}}" size="40"/>
</block>
</view>
<view class="group">
<block wx:for="{{iconColor}}">
<icon type="success" size="40" color="{{item}}"/>
</block>
</view>

radio:

checkbox :

6-2 自定義組件

自定義組件
從小程式基礎庫版本 1.6.3 開始，小程式支持簡潔的組件化編程，所有自定義組件相關特性都需要基礎庫版本 1.6.3 或更高，

開發者可以將頁面內的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊，有助于代碼維護，自定義組件在使用時與基礎組件非常相似，

創建自定義組件
類似于頁面，一個自定義組件由 json wxml wxss js 4個檔案組成，要撰寫一個自定義組件，首先需要在 json 檔案中進行自定義組件宣告（將 component 欄位設為 true 可將這一組檔案設為自定義組件）：

{
  "component": true
}

同時，還要在 wxml 檔案中撰寫組件模板，在 wxss 檔案中加入組件樣式，它們的寫法與頁面的寫法類似，具體細節和注意事項參見 組件模板和樣式 ，

代碼示例：

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>
/* 這里的樣式只應用于這個自定義組件 */
.inner {
  color: red;
}

注意：在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器，

在自定義組件的 js 檔案中，需要使用 Component() 來注冊組件，并提供組件的屬性定義、內部資料和自定義方法，

組件的屬性值和內部資料將被用于組件 wxml 的渲染，其中，屬性值是可由組件外部傳入的，更多細節參見 Component構造器 ，

代碼示例：

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內部資料
    someData: {}
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function(){}
  }
})
使用自定義組件
使用已注冊的自定義組件前，首先要在頁面的 json 檔案中進行參考宣告，此時需要提供每個自定義組件的標簽名和對應的自定義組件檔案路徑：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

這樣，在頁面的 wxml 中就可以像使用基礎組件一樣使用自定義組件，節點名即自定義組件的標簽名，節點屬性即傳遞給組件的屬性值，

開發者工具 1.02.1810190 及以上版本支持在 app.json 中宣告 usingComponents 欄位，在此處宣告的自定義組件視為全域自定義組件，在小程式內的頁面或自定義組件中可以直接使用而無需再宣告，

代碼示例：

在開發者工具中預覽效果

<view>
  <!-- 以下是對一個自定義組件的參考 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

自定義組件的 wxml 節點結構在與資料結合之后，將被插入到參考位置內，

細節注意事項:
一些需要注意的細節：

因為 WXML 節點標簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標簽名也只能包含這些字符，
自定義組件也是可以參考自定義組件的，參考方法類似于頁面參考自定義組件的方式（使用 usingComponents 欄位），
自定義組件和頁面所在專案根目錄名不能以“wx-”為前綴，否則會報錯，
注意，是否在頁面檔案中使用 usingComponents 會使得頁面的 this 物件的原型稍有差異，包括：

使用 usingComponents 頁面的原型與不使用時不一致，即 Object.getPrototypeOf(this) 結果不同，
使用 usingComponents 時會多一些方法，如 selectComponent ，
出于性能考慮，使用 usingComponents 時， setData 內容不會被直接深復制，即 this.setData({ field: obj }) 后 this.data.field === obj ，（深復制會在這個值被組件間傳遞時發生，）
如果頁面比較復雜，新增或洗掉 usingComponents 定義段時建議重新測驗一下，

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
# 學習時間：

<font color=#999AAA >提示：這里可以添加計劃學習的時間
例如：
1、 周一至周五晚上 7 點—晚上9點
2、 周六上午 9 點-上午 11 點
3、 周日下午 3 點-下午 6 點

---

四 :頁面生命周期圖