1.回顧

明確：
JS邏輯層文件JavaScript
WXML頁面的描述文件XeiXin Markup Language
WXSS樣式文件WeiXin Style Sheets
快捷鍵：
Ctrl+S 保存文件
Shift+Alt+F 格式化代碼
Ctrl+/ 代碼整行注釋或取消，在空白行次快捷鍵可添加注釋
項目調試：
真機調試–右上角真機調試，掃碼手機測試
開發工具調試–共10個功能
1）Console面板：控制臺，在執行代碼有誤時，顯示錯誤信息
2）Sources面板：顯示當前項目的腳本文件以及進行重要的斷點或者單步調試，左側是源文件的目錄結構
3）Network面板：云開發可以看到前后端交互時網絡請求與返回數據等信息
4）AppData面板：顯示當前項目運行時的具體數據
5）Storage面板：可以看到項目中使用小程序的API接口wx.setStorage或者wx.setStorageSync后本地數據緩存的情況
6）Wxml面板：與Chrome調試器中的Elments面板一樣，可以看到頁面布局文件的源代碼。
頁面UI樣式調試可以使用真機預覽
項目發布：
上傳
管理員提交體驗版
體驗版本的設置
提交審核
完整的小程序結構：
項目全局描述與配置文件：

• 項目邏輯文件app.js
• 項目配置文件app.json
• 全局樣式文件app.wxss
• 其它文件project.config.json/sitemap.json

其它資源文件
頁面描述文件:

• 頁面邏輯文件xx.js
• 頁面配置文件xx.json
• 頁面樣式文件xx.wxss

新建頁面的方法：
新建文件夾
右鍵：新建page

2.小程序的視圖與渲染

2.1 視圖與渲染過程

視圖層由頁面文件WXML和樣式文件WXSS共同組成
WXML中有多個組件component，每個組件都有自己特有的屬性，有的組件為了完成某些業務邏輯還需要綁定事件與數據
事件是視圖層和邏輯層的紐帶：用戶操作觸發事件后可通過同名的事件處理函數執行相應的邏輯，處理完成后，更新的數據又將再次渲染到頁面上

<!--index.wxml--> <view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view> </view>

最外層是樣式（即class屬性）為container的view組件
最大層view的下一級又嵌套了兩個view,class分別叫userinfo和usermotto
前面一個view的內部還有button組件
<block wx:else>這個是包裝元素，并不是組件，不會進行頁面的渲染

2.2 數據綁定

WXML頁面中可以用雙花括號里面添加變量名的形式表示動態數據，這稱為Mustache語法
Mustache語法是一個模板解析引擎，其作用是使用戶界面與數據分離，可生成特定格式標準的HTML文檔。
WXML中的動態數據均來自對應JS文件中的Page的data屬性，分別可以作用于WXML頁面的內容、組件屬性、控制屬性等。

2.3 渲染標簽

條件渲染
條件渲染是指根據綁定表達式的邏輯值來判斷是否渲染當前組件
view組件擁有控制是否顯示的hidden屬性

<view class="content" hidden="{{flag ? true : false}}"> </view> Page({data:{flag:false} })

wx:if與hidden控制是否渲染的邏輯變量值恰好相反

<view wx:if="{{length > 10}}">case1</view> <view wx:elif="{{length > 5}}">case2</view> <view wx:else>case3</view> Page({data:{length:6} })

block wx:if
使用一個表達式控制多個組件，使用標簽將一個包含多節點的結構塊包裝起來，然后在標簽中添加一個wx:if控制屬性

<block wx : if = "{{condition}}"> <view> view1 </view> <view> view2 </view> </block> Page({data:{condition:true} })

列表渲染
wx:for簡單列表渲染

<view wx:for = "{{array}}"> {{index}} : {{item.message}} </view> Page({data:{array:[{"message" : "mes1"},{"message" : "mes2"}{"message" : "mes3"},{"message" : "mes4"}]} })

循環數組中index和item都是默認變量名，在使用wx:for時也可以將數組當前下標和當前元素變量進行重命名
使用wx:for-item可以指定數組當前元素的變量名
使用wx:for-index可以指定數組當前下標的變量名

<view> <view wx:for = "{{users}}" wx:for-index="myindex" wx:for-item="user"> <text>{{myindex}}-{{user.name}}-{{user.age}}</text> </view> </view> Page({data:{users:[{name:"Toky", age:21},{name:"Nike", age:19},{name:"Lisa", age:20}]} })

九九乘法表案例
wx:for嵌套列表
block wx:for包裝–用于循環渲染標簽，渲染包含多個節點
wx:key屬性–用于在渲染列表時是否需要依據列表的某一關鍵字或自定義關鍵字進行排序

2.4 模板與引用

WXSS文件使用import關鍵字導入公共樣式文件
針對JS文件，可在utils.js或其它JS文件夾中編寫公共的業務邏輯，最后利用exports關鍵字進行導出
下面的引用和模板皆針對于WXML文件

引用本頁面的模板

<text class='h1'>模板與引用</text><view class='demo-box'><view class="title">1、定義模板區域</view><!--pages/demo2-4/template.wxml--><!----定義模板--><template name="userTemplate"><view><view>姓名：{{item.name}}</view><view>年齡：{{item.age}}</view></view></template><!-- 定義結束 --></view><view class='demo-box'><view class="title">2、調用模板</view><block wx:for="{{users}}"><!-- 調用模板，傳入對象數據--><template is="userTemplate" data="{{item}}" /></block></view> Page({/*** 頁面的初始數據*/data: {users: [{name: "Toky",age: 21}, {name: "Nike",age: 19}, {name: "Lisa",age: 20}], })

is屬性指定是哪一個模板，利用data屬性動態傳入數據

也可以單獨一個WXML文件定義模板，這時其他頁面進行引用時不是用關鍵字include，而是用import，二者的作用域不同。
import只會引入目標文件中定義的template，而不會引入目標文件里面再引入的其它template，即不能鏈式引用

<template name="template1"><text>{{text}}</text> </template> <template name="template2"><text>{{text}}</text> </template> <import src="../commons/templates"/> <template is = "template1" data="{{text:'這是傳入模板的需要顯示的內容'}}">

若只想引入靜態的WXML片段直接使用include關鍵字即可

九九乘法表

總結

以上是生活随笔為你收集整理的2021-09-03 【N02】小程序开发学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。