微信小程序的開發總結

小程序的界面配置

一、sitemap.json
站點地圖 微信搜一搜裏面哪些頁面能夠展現，哪些不能
二、project.config.json
項目配置
三、app.js
全局的業務邏輯
四、app.json
全局的小程序配置
五、app.wxss
全局的樣式
六、pages
存放頁面的文件夾
七、utils
存放工具的文件夾

app.json配置

pages頁面配置
那個頁面寫在前面，那個頁面默認打開
window窗口配置
一、backgroundTextStyle–背景文字顏色
二、navigationBarBackgroundColor–導航欄顏色
三、navigationBarTitleText–導航欄標題
四、navigationBarTextStyle–導航欄文字顏色
注意：.json文件不能註釋，最後一個選項不能有逗號

基礎語法

標籤

<view></view>
<text></text>

文本展現

{{msg}}

條件渲染

<view wx:if="{{flag}}">顯示</view>
<view wx:elif="{{num>5}}">顯示5</view>
<view wx:elif="{{num>2}}">顯示2</view>

列表渲染

<view wx:for="{{list}}" wx:key="index">
  {{index+1}}---{{item}}
</view>
<view wx:for="{{list}}" wx:for-item="myitem"
wx:for-index="myindex" wx:key="myindex"
>
{{myitem}}
</view>

template 模板

<template name="student">
<view>
    <view>名稱：{{name}}</view>
    <view>年齡：{{age}}</view>
</view>
</template>

導入模板 --import

<import src="./stu.wxml" />
<template is="student" data="{{...stu[0]}}"></template>

引入內容 --include

<include src="./prc.wxml" />

組件

text
view
input
image

api --wx開頭

一、wx.showToast({title:"",icon:‘none’})
二、wx.getStorageSync(k)獲取本地存儲
三、wx.setStorageSync(k,v)設置本地存儲
四、wx.request({
url:「xxx」,
method:「GET||POST」，
success(res){}
}) 網絡請求
五、wx.setNavigationBarTitle({title:「xxx」}) 設置標題

事件 --bind

一、bindtap --輕點
二、bindinput --表單的值發生改變
三、監聽事件(.wxml):
四、事件響應函
數(.js)
五、事件的參數
1.表單 --js中經過e.detail.value
2.其餘組件

<view bindTap="showMsg"
data-msg="i love"
></view>

3.在js中獲取

showMsg(e){
    //e.target.dataset.msg 獲取參數
}

4.事件函數
onReachBottom 觸底
onPullDownRefresh 下拉刷新

.json文件
"enablePullDownRefresh": true, 容許下拉刷新
"backgroundTextStyle":"dark" 下拉文字樣式 light dark

導航

<navigator />

url
open-type
一、navigate 默認跳轉
二、navigator 切換小程序

<navigator target="miniProgram" open-type="navigate" app-id="xxxx">
打開綁定的小程序</navigator>

三、switchTab切換底部欄
四、redirect 重定向
五、relunch 重啓
六、navigateBack 返回
七、exit退出
tabBar的配置
一、color 文字顏色
二、selectedColor 選中文字顏色
三、list 列表

"pagePath":"頁面地址",
"text":"首頁",
"iconPath":"圖片地址",
"selectedIconPath":"選中圖片地址"

js切換
一、wx.navigateTo({url:「xxxx」}) 跳轉
二、wx.navigateBack() 返回
三、wx.redirectTo({url:「xxxx」}) 重定向
四、wx.switchTab({url:「xxxx」}) 切換底部欄
頁面傳參
一、經過url傳參

pages/xxx/xxx?name=xxx&age=18

二、取參數

onload(options){
    console.log(options.name,options.age)
}

小程序的生命週期

一、onLaunch --程序啓動
二、onShow --程序切換到前臺
三、onHide --程序切換到後臺
四、onError --程序發生錯誤

頁面的生命週期

一、onLoad --頁面加載
二、onReady --渲染完畢
三、onShow --顯示
四、onHide --隱藏
五、onUnload --卸載 redirect|navigateBack觸發

小程序如何分包

app.json配置分包與分包預加載，一般底部欄對應頁面做爲主包對應的二級頁面做爲分包，包的大小2M最大16M，子包相互間不能引用，子包能夠引用主包app的內容

小程序的npm如何構造的

一、npm初始化
二、安裝的時候–S --production
三、詳情容許npm插件
四、工具構建npm

小程序如何實現更新數組某一項數據

使用ES6新增的屬性能夠動態的建立[「list[0]」]

小程序的組件

組件應用

一、定義組件 --組件文件夾(cell)—cell.wxml|cell.wxss|cell.js|cell.json
二、在頁面的json中註冊組件

"using":{
    "cell":"/components/cell/cell"
}

三、在頁面的wxml中使用

組件的插槽

一、目的 --組件能夠嵌套
二、傳入插槽內容

<cell><view>定義插槽內容</view></cell>

三、在組件接收

<view>
    <slot></slot>
</view>

命名插槽

一、定義

<view slot="head"></view>
<view slot="foot"></view>

二、使用插槽

<slot name="head">
<slot name="foot">

三、在組件的options選項中配置

options:{
    //多個slot
    multipleSlots:true,
  },

樣式隔離

options選項中配置
stylesolation

options:{
    //多個slot
    multipleSlots:true,
    styleIsolation:"isolated",
    // 樣式隔離方式 --isolated隔離,--apply-shared頁面樣式分享到組件,--shared雙向共享
  },

外部類

一、組件中配置
externalClasses:[「cell-class」],//01定義外部類 能夠組件外部定義，class在組件內容使用,傳遞過來的class

二、組件中使用

<view class="cell-class"></view>

三、頁面中傳入

<cell cell-class="mycell">

四、在頁面css中編寫mycell

.mycell{color:#f70}

組件的傳參

一、頁面參數傳遞

<cell url="/xx/xx/xx"><cell>

二、組件中定義

properties:{
    url:{type:String,value:''}
}

三、使用參數

this.data.url

構造器

一、Pages({})
二、Components({})

pageLifeTimes:頁面的生命週期

一、show顯示
二、hide隱藏
三、resize改變大小

lifetimes組件的生命週期

一、created建立
二、attached插入到頁
三、ready渲染完畢
四、move移動
五、detached移除
六、error錯誤

behaviors混合

var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  )},

observers:監聽

observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被設置時，執行這個函數
      this.setData({
        sum: numberA + numberB
      })
    }
  }

純數據字段

一、純數據字段是一些不用於界面渲染的data字段，能夠用於提高頁面更新性能
二、使用

options: {
    pureDataPattern: /^_/ // 指定全部 _ 開頭的數據字段爲純數據字段
  },
  data: {
    a: true, // 普通數據字段
    _b: true, // 純數據字段
  },

options選項

stylesolation:"isolated"

externalClasses:[「cell-class」]外部類

properties傳入的數據

data初始數據

methods方法

登陸

小程序

添加open-type與事件

<button 
    open-type="getUserInfo"
    bindgetUserInfo="bindGetUserInfo"
></button>

bindGetUserInfo須要用戶彈框受權，拿到用戶的：頭像、用戶名
wx.login({})拿到一個code信息、經過ajax把用戶信息、和code發送給服務器

服務器

appid+Appscecret+code發送給微信服務器
微信服務器響應後獲得open-id、session_key
一、open-id—用戶的惟一識別id
二、有了open-id 加上用戶名+暱稱 存入到本身服務器的數據庫中

微信服務器

將open-id、session_key發送給服務器

微信登陸流程——總結

一、在wx.login()函數中 獲取code
二、open-type=「getUserInfo」 獲取到用戶的頭型和暱稱等信息
四、把獲取到的code經過ajax發送給服務器
五、服務器經過appid+scecret+code換取 openid和session_key
六、能夠把openid+暱稱存儲到服務器
七、存儲到服務器成功後能夠自定義用戶的信息 登陸狀態