文章目錄
- 微信小程式
- 一、簡單了解
- 1.常用api
- 2.常用ui位址
- 二、微信小程式應用配置
- 根目錄
- app.json界面外觀
- pages
- window
- debug:
- app.js:
- wxss
- 頁面結構
- page.json
- 标簽欄
- 三、邏輯層與界面層分離架構
- 邏輯層的JavaScript
- 示範: getApp
- 示範 getCurrentPages()
- 示範符合commonjs規範
- 示範 wx對象
- 界面層(資料綁定)
- 資料綁定--元素上綁定
- 資料綁定--屬性上綁定資料
- 資料綁定--知識補充
- 1.在{{}}中寫字元串
- 2.計算變量
- 3.{{}} 可以解決 文法解析 true /fasle 出現bug的問題
- 清單渲染
微信小程式
一、簡單了解
1.常用api
<https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E4%BD%93%E9%AA%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F>
官方示例源碼位址:
<https://github.com/wechat-miniprogram/miniprogram-demo>
pages每個檔案夾就是一個頁面:
2.常用ui位址
https://weui.io/#
二、微信小程式應用配置
根目錄
app.json界面外觀
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
pages
設定頁面
window
設定導航欄,設定下拉重新整理
debug:
debug: true 調試模式
app.js:
//app.js
var obj = {
onLaunch: function () {
// 展示本地存儲能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登入
wx.login({
success: res => {
// 發送 res.code 到背景換取 openId, sessionKey, unionId
}
})
// 擷取使用者資訊
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經授權,可以直接調用 getUserInfo 擷取頭像昵稱,不會彈框
wx.getUserInfo({
success: res => {
// 可以将 res 發送給背景解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網絡請求,可能會在 Page.onLoad 之後才傳回
// 是以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
}
//調用了一個App的方法
App(obj)
//調用App方法的作用是用來建立應用程式執行個體對象
//定義應用程式的聲明周期事件
wxss
寫一些樣式的檔案
頁面結構
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
log.json 覆寫app.json裡面的全局外觀配置。
page.json
頁面中配置項在目前頁面會覆寫
app.json
的
window
中相同的配置項。檔案内容為一個 JSON 對象
注意: 隻能設定 window的配置,不能設定pages和debug的參數
标簽欄
在app.json中設定tabBar.
tabBar中list設定2-5個标簽
"tabBar": {
"list":[{
"pagePath":"pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
"tabBar": {
"color": "#444",
"SelectedColor": "#219BF3",
"backgroundColor": "#e0e0e0",
"borderStyle": "white",
"position": "bottom",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath":"images/1.png",
"selectedIconPath":"images/3.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "images/1.png",
"selectedIconPath": "images/3.png"
}
]
},
三、邏輯層與界面層分離架構
- 邏輯層:
- 界面層
邏輯層的JavaScript
和普通的js的差别:
1:沒有bom和dom
2:小程式的js有一些額外的成員
- App 方法 用于定義應用程式執行個體對象
- Page方法 用于定義頁面對象
- getApp 方法 用于擷取全局應用程式對象
- getCurrentPges 方法 用來擷取目前頁面的調用棧(數組,最後一個是目前頁面)
-
wx對象 用來提供核心Api的:
專門的頁面介紹:https://developers.weixin.qq.com/miniprogram/dev/api///console.log(wx)
-
小程式的js是支援commonjs規範的:
//const foo = require(’./utils/foo.js’)
//foo.say(‘world’)
示範: getApp
app.js中:
定義個foo方法:
index.js中:直接調用:
列印結果如下:顯示已經調用成功。
示範 getCurrentPages()
示範符合commonjs規範
在utils下建個foo.js
function say(msg){
console.log('Hello' + msg)
}
//導出say方法
module.exports = {
say: say
}
在app.js中調用:
看下運作效果:
總結就是: 一個export 一個 require
不支援export.xxx;隻支援module.exports
示範 wx對象
在app.js中
console.log(wx)
效果:
界面層(資料綁定)
資料綁定
資料綁定–元素上綁定
index子產品
//index.js
//擷取應用執行個體
const app = getApp()
Page({
//為頁面提供資料的
//data就是界面和邏輯之間的橋梁
data: {
message: 'Hello World',
person:{
name:"小胡"
}
}
})
<!--index.wxml-->
<!-- 架構最大的特點,就是讓我們開發者必須按照特定的方式編寫代碼 -->
<!--
1.資料在哪 (目前頁面對象的data 屬性中)
2.綁定到哪裡去(想綁定到哪就在哪裡用mustche文法輸出)
-->
<view class="container">
<!-- 這種{{}}的文法叫做小胡子文法 -->
<text>{{message}}</text>
<text>{{person.name}}</text>
</view>
頁面效果:
資料綁定–屬性上綁定資料
/**index.wxss**/
.hello{
width: 100px;
height: 100px;
background-color: pink;
}
看下效果:
源碼位址:
https://github.com/hufanglei/wx-demo/tree/attr-bind
資料綁定–屬性上綁定資料–拼接資料
注意: world後面有空格。
/**index.wxss**/
.hello{
width: 100px;
height: 100px;
background-color: pink;
}
.world {
background-color:yellow;
}
效果:
資料綁定–知識補充
1.在{{}}中寫字元串
<view class="world {{ viewClassName }}">
<text>{{ 'hello' }}</text>
</view>
效果(hello不是變量):
2.計算變量
<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>
3.{{}} 可以解決 文法解析 true /fasle 出現bug的問題
舉例說明:
<!--index.wxml-->
<!-- 架構最大的特點,就是讓我們開發者必須按照特定的方式編寫代碼 -->
<!--
1.資料在哪 (目前頁面對象的data 屬性中)
2.綁定到哪裡去(想綁定到哪就在哪裡用mustche文法輸出)
-->
<view class="container">
<!-- 這種{{}}的文法叫做小胡子文法 -->
<text>{{message}}</text>
<text>{{person.name}}</text>
<!-- mustache 文法可以用在:
1. innerHTML(類似)
2. 元素的屬性上
不能用在标簽名和屬性名上
-->
<view class="world {{ viewClassName }}"></view>
<!-- 可以使用字面量和簡單的邏輯運算符 -->
<text>{{ 'hello' }}</text>
<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>
<text>{{ 100 > 50 ? '你對了' : '你錯了'}}</text>
<!--
當文法解析誤解了 true/ false
可以使用{{}} 解決
-->
<checkbox checked="{{ false }}">
</checkbox>
</view>
不加{{}}就會出現問題
<checkbox checked="false">
</checkbox>
居然選中了!!
解決方式就是: false外面包一層 {{}}
清單渲染
1: 明确頁面結構的循環體
2:删除多餘的重複内容,隻保留一個
3:在剩下的這個價格wx:for屬性,屬性值等于要周遊的資料源,資料源是數組
4:在這個标簽(循環體)内部使用item代表目前被周遊的元素
給被周遊的對象定義名稱 wx:for-item
給周遊的下标(索引) 定義名稱 wx:for-index
代碼示範:
<!--index.wxml-->
<!-- 架構最大的特點,就是讓我們開發者必須按照特定的方式編寫代碼 -->
<!--
1.資料在哪 (目前頁面對象的data 屬性中)
2.綁定到哪裡去(想綁定到哪就在哪裡用mustche文法輸出)
-->
<view class="container">
<!-- 這種{{}}的文法叫做小胡子文法 -->
<text>{{message}}</text>
<text>{{person.name}}</text>
<!-- mustache 文法可以用在:
1. innerHTML(類似)
2. 元素的屬性上
不能用在标簽名和屬性名上
-->
<view class="world {{ viewClassName }}"></view>
<!-- 可以使用字面量和簡單的邏輯運算符 -->
<text>{{ 'hello' }}</text>
<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>
<text>{{ 100 > 50 ? '你對了' : '你錯了'}}</text>
<!--
當文法解析誤解了 true/ false
可以使用{{}} 解決
-->
<checkbox checked="false">
</checkbox>
<!-- 清單資料渲染 -->
<!-- <view>
<view>
<checkbox></checkbox>
<text>JavaScript</text>
</view>
<view>
<checkbox checked="{{true}}"></checkbox>
<text>HTML</text>
</view>
<view>
<checkbox></checkbox>
<text>CSS</text>
</view>
</view> -->
<view wx:for="{{ todos }}" >
<checkbox checked="{{item.completed}}"></checkbox>
<text>{{item.name}}</text>
</view>
如果全局屬性中有item這種關鍵詞,可以使用wxlfor-item去給目前周遊資料起别名
<view wx:for="{{ todos }}" wx:for-item="aaa">
<checkbox checked="{{aaa.completed}}"></checkbox>
<text>{{aaa.name}}</text>
</view>
拿序号
<view wx:for="{{ todos }}" wx:for-item="aaa" >
<checkbox checked="{{aaa.completed}}"></checkbox>
{{index}}
<text>{{aaa.name}}</text>
</view>
拿序号并起别名
<view wx:for="{{ todos }}" wx:for-item="aaa" wx:for-index="i" >
<checkbox checked="{{aaa.completed}}"></checkbox>
{{i}}
<text>{{aaa.name}}</text>
</view>
列印九九乘法表
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
<!-- wx:if 是用來根據一個bool值決定顯示或隐藏 -->
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
<!--
1: 明确頁面結構的循環體
2:删除多餘的重複内容,隻保留一個
3:在剩下的這個價格wx:for屬性,屬性值等于要周遊的資料源,資料源是數組
4:在這個标簽(循環體)内部使用item代表目前被周遊的元素
給被周遊的對象定義名稱 wx:for-item
給周遊的下标(索引) 定義名稱 wx:for-index
-->
</view>
顯示效果如下: