【微信小程式】原來如此簡單

wx小程式與傳統web的對比

傳統web一般就只有3個結構(html,css,js)，而小程式多了個(json)組態檔

通過上面的對比可以看出，微信小程式是四層結構，多個一層的組態檔.json

wx小程式的目錄結構

要學習一個新的語言就要先要了解他的目錄結構，以及目錄結構中檔案夾的功能

一、全域組態檔
全域組態檔主要有三個屬性組成：pages，window，tabBar

• pages主要是配置子頁面的路徑，
• window主要是配置頂部欄的一些資訊，
• tabBar主要是配置底部導航欄的一些圖示，跳轉，文字等，

二、頁面的組態檔
就是配置每個頁面中的json檔案，
他只能配置組件和頂部欄的一些資訊

• usingComponents用來配置自定義組件
• 剩下的就直接在全域配置導航欄資訊就可以了

具體語法

一、資料渲染
和vue的資料驅動渲染方式幾乎差不多，
js定義資料，wxml用{{資料/運算式}}方式渲染，

二、回圈

<view wx:for="{{arry}}" wx:key="*this">{{index}}--{{item}}</view>
<view wx:for="{{obj}}" wx:for-item="value" wx:for-index="key" wx:key="name">{{key}}--{{value}}</view>

三、wx-if hidden

<!-- wx-if(去除dom) -->
<view wx:if="{{true}}">顯示</view>
<view wx:if="{{false}}">隱藏</view>
<!-- hidden(display:none) -->
<view>---------------------------------</view>
<view hidden>hidden</view>
<view hidden="{{false}}">hidden01</view>

四、事件系結
在一個標簽中系結事件的格式為：bind+事件名="函式名"

注：如果要這個函式中要傳引數時就要借助data-標簽名="{{資料}}"

例子1(類似于vue的雙向資料系結)：

//html

//1.bindinput為input事件
<input type="text" bindinput="handleInput"/>
//2.bindtap為點擊事件
<button bindtap="handleButton" data-num="{{1}}">+</button>
<button bindtap="handleButton" data-num="{{-1}}">-</button>
<view>
  {{num}}
</view>

//js
  data: {
    num:0
  },
  handleInput:function(e){
    //this.setData()是對資料進行修改的固定方式
    this.setData({
        //e.detail.value為input輸入資料的值
      num:e.detail.value
    })
  },
  handleButton:function(e){
   //number為html中data-num屬性傳入的值
    var number= e.currentTarget.dataset.num
    this.setData({
      num:this.data.num+number
    })
  },

樣式

自適應寬度

rpx是微信開發的自適應寬度，它規定一個螢屏的大小為750rpx

例子：存在一個頁面 寬度 未知page

1. 頁面 (寬度：page) ,期中存在一個元素 寬度為100px
2. 那以上需求實作不同螢屏大小的適配

計算步驟

page px=750rpx
1px =750rpx/page
100px=750rpx*100/page

calc屬性

把公式計算出來的數，賦值給屬性，要利用此公式做計算

view{
    width:calc(750rpx*100/325)
}

樣式匯入

wxss支持樣式匯入

格式：@import+路徑

注意：格式只能是相對路徑

@import '../../style/commint.wxss';

選擇器

在小程式中是不支持*通配符選擇器的，

別的和普通的css的選擇器用法都一樣，

常見組件

view, text, rich-text, button , image , navigator , icon, swiper , radio, checkbox，

view

類似html中的div標簽

//不點擊默認為none，點擊之后切換對應樣式
<view hover-class="active">
內容
</view>

text

類似html的span標簽

樣式和樣式的具體屬性

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

image

src:要寫網路圖片鏈接，image標簽默認寬高320px 240px  

  mode:決定圖片元素如何與圖片做適配

?    1.scaleToFill(默認)不等比例拉伸

?    2.aspectFit 等比例拉伸  確保長邊顯示出來

?    3.aspectFill 等比例拉升 確保短邊顯示出來

?    4.widthFix 寬度指定，高度自動調節

?    5.top,bottom，，類似于background-position

  lazy-load:懶加載會自己判斷  視口 上下三螢屏 高度

swiper

是wx小程式的輪播圖插件

swiper是輪播圖的父級標簽，具體的元素用swiper-item期中可以放圖片或鏈接

• swiper按照圖片的大小自適應

公式：swiper的寬度/swiper的高度=圖片的寬度/圖片的高度

一般swiper的寬度都會占整個螢屏的寬度，所以swiper的寬度已知（即100vw），所以只需要設定swiper的高度和圖片的寬高適配就行了

圖片的寬和高都已知，所以swiper的高度為：swiper的寬度*圖片的高度/圖片的寬度

具體屬性

swiper屬性

例子：

//wxml
<swiper>
    <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg"></image></swiper-item>
    <swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB183NQapLM8KJjSZFBSutJHVXa.jpg"></image></swiper-item>
</swiper>

//wxss
swiper{
  width: 100%;
  height:cale(100vw*280/520) ;
}
image{
  width: 100%;
}

navigator

相當于html中的a標簽，但是他與a標簽又有不同之處，它主要是用來進行頁面的跳轉

是一個塊級元素標簽

rich-text

相對于vue中v-html

• nodes屬性

該屬性用于設定html值

<rich-text nodes="{{html}}"></rich-text>

• 受信任的HTML節點及屬性：

https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

button

不同尋常的按鈕

//樣式
<button>默認樣式</button>
<!-- 設定尺寸 -->
<button size="mini">mini</button>
<!-- 改顏色：primary顏色 -->
<button type="primary">primary</button>
<!-- 改顏色+透明：warn+plain -->
<button type="warn" plain>warn和plain</button>
<!-- 等待圖片：loading -->
<button type="primary" loading>loading</button>
<!-- 無法選中：disabled -->
<button disabled>disabled</button>


<!-- open-type屬性值 -->
<!-- 分享：share -->
<button open-type="share">share</button>
<!-- 獲取手機號和bindgetphonenumber事件結合使用(企業有效) -->
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">獲取手機號</button>
<!-- 獲取用戶資訊：和bindgetuserinfo事件結合使用(回呼函式中回傳) -->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取用戶資訊</button>
<!-- 授權：之前授權的項才能在這里面顯示 -->
<button open-type="openSetting">授權頁面</button>
<!-- 聯系客服，可在微信開發者平臺系結客服 -->
<button open-type="contact">聯系客服</button>
<!-- 意見反饋 -->
<button open-type="feedback">feedback</button>

icon

wx封裝的字體圖示

<icon type="success" size="40" color="black"></icon>

radio

單選框，要配合radio-group使用，也可以利用color屬性改變顏色

//wxml
<radio-group bindchange="gender">

  <radio value="male" color="blue">男</radio>

  <radio value="female" color="blue">女</radio>

</radio-group>

<view>{{gender}}</view>

//js
data: {
    gender:""
  },
  gender:function(e){
    let gender=e.detail.value
    this.setData({
      gender
    })
  },

checkbox

多選框，和radio用法差不多，要配合checkbox-group使用，也能利用color改變顏色

//wxml
<checkbox-group bindchange="checkChaneg">
    <checkbox wx:for="{{list}}" wx:key="name" value="{{item.value}}">{{item.name}}</checkbox>
</checkbox-group>
<view wx:for="{{viewText}}" wx:key="*this">{{item}}</view>

//js
data: {
    list:[{
      name:"香蕉",
      value:'bananr'
    },{
      name:"蘋果",
      value:'apple'
    },{
      name:"西瓜",
      value:'melon'
    }],
    viewText:[]
  },
  checkChaneg:function(e){
    let viewText=e.detail.value
    this.setData({
      viewText
    })
  },

自定義組件

主要是指在頁面中封住一些通用的功能到一個組件中

• 首先先建立一個組件目錄結構

通過wxml，js和wxss定義樣式

• 配置自定義的組件

在要用這個組件的專案中的組態檔.json中配置

• 在wxml中直接寫這個組件就可以運用了

 <Tabs list="{{list}}"></Tabs>

父類向子類傳參

如果這個自定義組件的文字要根據每個父級穿過來的引數動態改變，就要運用到此功能

• 例如：動態改變標簽的文字

父級：運用組件的實體、子級：組件

主要是運用自定義組件的屬性傳參，進行此操作，然后在組件的js檔案中的properties屬性接受

接受方式：

//list為接受傳來的引數，value為默認值
properties: {
      list:{
        type:Array,
        value:[]
      }
  },

父級穿過來的值，子級可以就當這個值是data中的值一樣的使用，就完成了此功能

子級向父級傳參

通過子級自定義事件傳給父級，然后再在子級的做js操作就顯得比之前只在組件中定死js邏輯要爽

因為在組件寫js邏輯，是在組件中定死的邏輯，而在父級寫就是跟隨父級變化的邏輯

• 首先在組件觸發事件時，自定義組件并把資料傳給父級

methods: {
    Tap(e){
      let{index}=e.currentTarget.dataset;
      this.triggerEvent('itemChange',{index})
    }
  }
})

• 父級利用自定義組件的回呼函式接受資料，并做js處理

//wxml
<Tabs list="{{list}}" binditemChange="change"></Tabs>

//js
 change(e){
     let {index}=e.detail;
     let {list}=this.data
      // wx小程式foreach會把修改的項保存到原陣列中
      list.forEach((v,i)=>{
        if (i===index){
          v.isTrue=true
        }else{
          v.isTrue=false
        }
      })
      this.setData({
        list
      })
  },

點擊標題內容改變

在組件中運用slot標簽，solt便簽的內容會被父級所運用的組件標簽的內容所替代

• 組件實作步驟

在組件中使用solt標簽，用來被父級內容替換

• 運用組件父級

<Tabs list="{{list}}" binditemChange="change">
    <block wx:if="{{list[0].isTrue}}">內容1</block>
    <block wx:elif="{{list[1].isTrue}}">內容2</block>
    <block wx:elif="{{list[2].isTrue}}">內容3</block>
    <block wx:elif="{{list[3].isTrue}}">內容4</block>
</Tabs>

自定義組件補充

生命周期

生命周期就是系統自定好的觸發事件，只不過觸發時機由系統已經定義好了

分為應用生命周期和頁面生命周期

一、應用生命周期就是app.js監聽的各種生命周期事件

二、頁面生命周期

在每個pages檔案中的js檔案中配置

生命檔案https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html