微信小程序個人技術總結

這個作業屬於哪個課程	<福州大學2021春軟件工程實踐S班>
這個作業要求在哪里	軟件工程實踐總結&個人技術博客
這個作業的目標	相關技術博客
參考文獻	無

目錄

• 技術概述
• 技術詳述
  • flex布局
  • 微信小程序的數據綁定
    • 數據流向
      • 單向數據綁定
        • data，setData
        • js當中函數
      • Mustache語法解析
  • 渲染
    • 條件渲染
    • 列表渲染
  • 事件
    • 用bind綁定事件執行回調
    • bind與catch的區別
  • 路由
    • js模塊導入導出
  • 自定義組件
    • 組件屬性
  • 外部樣式類
    • 提高樣式優先級
    • 組件獨立性
    • 自定義事件
  • 數據傳遞
    • app.js
      • 生命周期
      • 保存全局變量
    • 小程序緩存
      • 異步獲取時
    • 組件獲取值
  • tabBar
    • 跳到帶有tabBar選項卡的頁面
  • this指針
• 問題，解決方案
• 總結

技術概述

微信小程序是類似於Vue的較於Vue的更簡單的開發前端代碼。新版微信小程序，增加了數據響應，模板語法，也就使得開發變得更加便捷，更加類似Vue，但上手更簡單，更好理解。學習這些技術可以更好的開發。當涉及到頁面布局，頁面響應，頁面渲染，頁面響應時間，頁面引用組件，頁面跳轉時，這些技術就必不可少

技術詳述

flex布局

容器組件

//flex布局
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
   //align-items: baseline;//按照容器基線對齊
  justify-content: center;
   //justify-content: space-between 兩端
   //justify-content: space-around 等距
   //flex-wrap : wrap 超過就換行
}

align-items:center

交叉軸居中

justify-content: center;

主軸居中

主軸：row排列，x軸就是主軸

​ column排列，y就是主軸

交叉軸：另外一條軸

微信小程序的數據綁定

數據流向

• 單向數據綁定
  • JS從服務器獲取數據
  • JS通過setData將數據綁定到視圖
• 簡易雙向數據綁定，實現數據同步（類似Vue）

單向數據綁定

• js文件
  • onload
    • 頁面加載時執行的代碼
  • data
    • data下定義的變量，可以在wxml上用

data，setData

js文件當中

data{
    a:"123"
}
onLoad{
    this.setData({
        b:"2021"
    })
}

應用

<text>{{a+b}}</text>

數據優先

原生js DOM優先

js當中函數

onReachBottom 觸底時

onPullDownRefrash 下拉刷新時

Mustache語法解析

{{}}

多層json就直接什么.什么

也可以加表達式

渲染

條件渲染

<wx:if={{flag}}>
<wx:else>

列表渲染

content內容多時，用數組[{},{}]顯示

此時 this.setData({ posts:content })

wx:for 放在要循環的內容外

用 包裹

同時內部的數據取時

用item.content

👆是因為默認的wx:for-item="item"

也可以修改成其他的，就可以用不同的內容開頭了

 <block wx:for="{{posts}}">
    <view class="post-container">
      <view class="post-author-date">
        <image src="{{item.headImgSrc}}" class="post-author"></image>
        <text class="post-date">{{item.date}}</text>
      </view>

      <text class="post-title">{{item.title}}</text>

      <image src="{{item.imgsrc}}" class="post-image"></image>

      <text class="post-content">{{item.content}}</text>

      <view class="post-like">
        <li-icon name="favor" class="post-like-image" size="32" color="#666"/>
        <text class="post-like-font">{{item.dataNum.collection}}</text>
        <li-icon name="eye" class="post-like-image" size="32" color="#666"/>
        <text class="post-like-font">{{item.dataNum.reading}}</text>
      </view>
    </view>
  </block>

• 屬性
  • wx:for-item="item"
    • 默認item
    • 每一項前面要添加的內容
  • wx:for-index="index"
    • 默認index
    • 每一項的索引獲取
  • wx:key="id"
    • 鍵值
    • 不加{{}}，不然會警告

事件

tap 點擊事件

用bind綁定事件執行回調

<view bind:tap="onTap" class="btn-container"></view>

onTap: fucntion(){
    
}

也可以用catch：tap

bind與catch的區別

• catch
  • 阻止向上冒泡
• bind
  • 不阻止向上冒泡

路由

• wx.navigateTo({
  	url:"/pages/page"
  })
  

  左上角有一個返回箭頭

  相當於一個頁面的子頁面，可以返回到上一級

  ​ 最多只能有10級子頁面

  • 跳轉出去時，原來頁面不會被銷毀

• wx.redirectTo({
  	url:""
  })
  

  左上角就沒有返回箭頭了

  左上角有一個home按鈕，可以跳轉到首頁

  • 跳轉出去時，原來頁面會被銷毀掉

js模塊導入導出

單獨將data數據分離到一個data.js數據當中

• 數據導出

  • module.exports={
    	postList : local_database
    }
    

  • export{
    	postList
    }
    

    后續導入的時候，需要保證同名

• 數據導入

  • var postData = require("")
    //里面只能跟相對路徑
    

    只能跟相對路徑

  • import {postList} from "../../data/data.js"
    

自定義組件

• 使用

  • 在要使用的頁面的json文件當中

     "usingComponents": {
        "li-icon":"/miniprogram_npm/lin-ui/icon/index"
      }
    

組件屬性

• 寫在組件js文件的properties中

• properties: {
     text:{
       type:String,
       value:'123'
     }
   },
  

• text:String
  
  //默認值是每種類型的默認值
  

• properties定義的內容和data一樣可以做數據綁定

外部樣式類

當外部使用組件樣式不生效時候

可以定義外部樣式類

調用組件的頁面定義樣式，組件去使用

<movie-list f-class="movie-list"></movie-list>
<movie-list f-class="movie-list"></movie-list>
<movie-list f-class="movie-list"></movie-list>

組件

externalClasses:['f-class'],
  
properties: {

  },

提高樣式優先級

movie-list{
    background-color:teal !important;
}

組件獨立性

每個組件事件不一樣

自定義事件

讓組件使用者決定響應什么事件

• 組件

<view  bind:tap="onTap" data-pid="0"></view>

 methods: {
    onTap (event){
      this.triggerEvent('posttap',{
          pid : event.currentTarget.dataset.pid
      })
    }
  }

• 調用組件位置（父組件）

  <post bind:posttap = "onGoToDetail"/>
  

  //獲取data
  onGoToDetail(event){
  	const pid = event.detail.pid
  }
  

數據傳遞

data屬性

<view data-id="{{postId}}"></view>

命名規范：

​ -連接符

這樣在dataset當中就會轉換成小駝峰命名

• event當中

  • currentTarget綁定了對象
    • dataset當中有
      • id

• 傳遞數據在url后面添加

• 獲取參數時，onLoad參數的option就會取出來參數

  • onload里面就有
    • id=？？

app.js

生命周期

• onLaunch
• onShow
• onHide
• onError

保存全局變量

App({
    onLaunch(){
        
    },
    test :1
})

//獲取值
const app = getApp()
console.log(app.test)

小程序緩存

類似於localstorage

• 同步

  • wx.setStorageSync('key', data)

• 異步

  • wx.setStorage({
         data: data,
         key: 'key',
       })
    

wx.removeStorageSync("key")

wx.clearStorage()

• 讀取緩存
  • wx.getStorageSync("key")

異步獲取時

wx.setStorage({
      data: data,
      key: 'key',
    })
    
const falg = wx.getStorage({
	key:"flag",
	success(data){
		console.log(data.data)
	}
})

//當沒有定義success時候，取值的返回值時promise

promise獲取

• 傳統

  • const falg = wx.getStorage({
    	key:"flag"
    })
    flag.then((value)=>{
    	console.log(value)
    })
    
    

• ES7

  • async onLoad(){
    	//要使用await的函數體前面+ async
    	const flag = await wx.getStorage({
    		key : 'flag'
    	})
    }
    

一組應用

  data: {
    _pid : null,
    _post_collected : {},
    is_collect : false
  },
  onLoad: function (options) {
    const collected = wx.getStorageSync('posts_collected')
    this.data._post_collected = collected //將目前storage中的內容給到data當中
    this.data._pid = options.pid
    const is_collect = collected[this.data._pid]
    this.setData({
      postData,
      is_collect
    })
  },
  onCollection(event){
    const postsCollected = this.data._post_collected
    this.setData({
      is_collect : !this.data.is_collect
    })
    postsCollected[this.data._pid] = this.data.is_collect
    wx.setStorageSync('posts_collected', postsCollected)
    console.log(wx.getStorageSync('posts_collected'))
  },

組件獲取值

在組件當中定義一個properties屬性，在調用組件時，直接給組件進行傳參

tabBar

app.json

 "tabBar": {
    "selectedColor": "#333333",
    "color": "#999999",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "text": "閱讀",
        "pagePath": "pages/posts/posts",
        "iconPath":"/images/tab/post.png",
        "selectedIconPath": "/images/tab/[e-mail]"
      },
      {
        "text": "電影",
        "pagePath": "pages/movies/movies",
        "iconPath":"/images/tab/movie.png",
        "selectedIconPath": "/images/tab/[e-mail]"
      }
    ]
  },

跳到帶有tabBar選項卡的頁面

  onTap: function(){
    wx.switchTab({
      url: '/pages/posts/posts',
    })
  },

this指針

this指針問題

     wx.request({
      url: 'http://t.talelin.com/v2/movie/in_theaters?start=0&count=3',
      success(res){
        this.setData({
          inTheaters:res.data.subjects
        })
      }
    })
    //導致this指針不明確

使用箭頭函數，使得success當中不存在this指針

     wx.request({
      url: 'http://t.talelin.com/v2/movie/in_theaters?start=0&count=3',
      success:(res)=>{
        this.setData({
          inTheaters:res.data.subjects
        })
      }
    })

問題，解決方案

• wx.request無法訪問https的頁面
  • 解決方案：改用request后就可以使用了
• this指針問題
  • 存在有嵌套簡單函數利用function語法this指針指向錯誤問題。再外部存儲this指針后，再調用函數

總結

這次分給我的開發任務較少，主要任務集中在監督，管理上，上述技術詳情有的並沒有運用在我自己的開發當中，但本次項目必不可少。這次學到的微信小程序知識仍然停留在簡單層面，還需要再往深處研究，才能更好的解決實戰中的更多問題。