【小程序】基礎內容
簡而言之：介紹部分重要的內容，快速入門小程序。在此基礎上再細看官方文檔。
1.獲取APPID
由于后期調?微信?程序的接?等功能，需要索取開發者的?程序中的 APPID ，所以在注冊成功后，
可登錄微信公眾平臺，然后獲取APPID。
登錄成功后可看到如下界?
然后復制AppID，
2.開發工具下載
穩定版 Stable Build | 微信開放文檔
填入AppID
3.開發工具介紹
3.miniprogram結構目錄
4.全局配置app.json
app..json 是當前?程序的全局配置，包括了?程序的所有??路徑、界?表現、?絡超時時間、底部 tab 等。普通快速啟動項??邊的 app..json 配置
字段的含義
1）. pages 字段 ? ?于描述當前?程序所有??路徑，這是為了讓微信客?端知道當前你的?程序
??定義在哪個?錄。
2）. windows 字段 ? 定義?程序所有??的頂部背景顏?，?字顏?定義等。
3）. 完整的配置信息請參考 全局配置 | 微信開放文檔
5.頁面配置page.json
這?的 page.json 其實?來表????錄下的 page.json 這類和?程序??相關的配置。
開發者可以獨?定義每個??的?些屬性，如頂部顏?、是否允許下拉刷新等等。
??的配置只能設置 app.json 中部分 windows 配置項的內容，??中配置項會覆蓋 aapppp..json的 windows 中相同的配置項。
6.sitemap 配置-了解即可
?程序根?錄下的 sitemap.json ?件?于配置?程序及其??是否允許被微信索引。準備上傳小程序項目時再使用
7.小程序中的標簽及數據綁定 text 相當于web中的span標簽 行內元素 不會換行 view 相當于web中的div標簽 塊級元素 會換行 checkbox 復選框 radio單選框 input輸入 標簽
page.wxml
page.js
Page({ data: { message: 'Hello MINA!' } })
組件屬性
page.wxml
page.js
Page({ data: { class: LongYorke } })
bool類型
不要直接寫 checked= false ，其計算結果是?個字符串
注意：使用bool類型充當屬性時，字符串和花括號之間不能存在空格，否則會導致數據識別失敗
8.運算
三元運算
hidden屬性用于隱藏常用的標簽或組件
算數運算
Page({ data: { a: 1, b: 2, c: 3 } })
邏輯判斷
使用： 1）當標簽不是頻繁的切換顯示，優先使用wx：if，直接把標簽從頁面結構中移出
2）當標簽頻繁切換顯示的時候優先使用hidden 通過添加樣式（display：none）的方式來切換顯示
【注意：使用hidden時作用域內的樣式不能使用display屬性】
字符串運算
Page({ data:{ name: 'MINA' } })
再次提醒：花括號和引號之間如果有空格，將最終被解析成為字符串
9.循環（對象/數組）
如果遍歷數組的話
wx:for
項的變量名默認為 item 而wx:for-item 可以指定數組當前元素的變量名
下標變量名默認為 index 而wx:for--index 可以指定數組當前下標的變量名
wx:key ?來提?數組渲染的性能
wx:key 綁定的值 有如下選擇
1. string 類型，表? 循環項中的唯?屬性 如
list:[{id:0,name:"炒飯"},{id:1,name:"炒面"}] wx:key="id"
2. 保留字 *this ，它的意思是 item 本? ，*this 代表的必須是 唯?的字符串和數組。
如果遍歷對象的話：
一般設 wx:for-item 作為指定當前對象的值
一般設為 wx:for--index 作為指定當前對象的屬性
wx:key ?來提?數組渲染的性能
如：
wx:for="{{對象}}" wx:for-item="對象的值”wx:for-index="對象的屬性"
即
wx :for-item="value" wx:for-index="key"
10.block標簽 1）相當于占位符的標簽，包含多節點的結構塊
2）寫代碼時可以看到代碼的存在
3）編譯的時候小程序會將它移出，不會變成真正的DOM元素
11.?程序事件的綁定
?程序中綁定事件，通過bind關鍵字來實現。如 bindtap、bindinput、bindchange 等
不同的組件?持不同的事件，具體看組件的說明即可
事件傳值可通過標簽自定義屬性和輸入value實現
Page({ // 綁定的事件 handleInput: function(e) { console.log(e); console.log("值被改變了"); // {myname: "LongYorke"} console.log(e.currentTarget.dataset); // 輸入框的值 console.log(e.detail.value); } })
數據的雙向綁定，及實現加減操作
步驟： 1）需要給input標簽綁定事件 numText 事件 綁定關鍵字：bindinput
2）如何獲取輸入框的值 通過事件源對象來獲取 e.detail.value
3）把輸入框的值 賦值 到data中 this.setData({ num:e.detail.value })
4）添加點擊事件 bindtip 無法在小程序事件中直接傳遞參數 通過自定義屬性的方式來傳參 在事件源中獲取 自定義屬性
12.WXSS
WXSS是?套樣式語?，?于描述 WXML 的組件樣式。
rpx（responsive pixel）: 可以根據屏幕寬度進??適應。 1）屏幕寬度為750px時，1px=1rpx
2）屏幕寬度為375px時，1px=2rpx
3）屏幕寬度為page時 page px = 750rpx 1px = 750rpx / page 例如 ：100px = 750rpx * 100 / page
4）calc屬性是 css 和 wxss 都支持的一個屬性
注意：
1.750和rpx中間不要留空格
2.運算符的兩邊要留空格
樣式的引用
1）通過 @import “路徑” 引入
2）引入樣式的路徑只能為相對路徑（…/…/com.wxss）
選擇器 注意：小程序中不支持 通配符（*）
目前支持的選擇器：
13.小程序中常見的組件 1）view（相當于div標簽）
2）text（文本標簽相,當于span，只能嵌套text，長按文字可以復制【只有該標簽有這個功能】，可以對空格回車進行編碼）
例如：
3）image（圖片打包的大小不能超過2M），在使用圖片時就使用外網圖片（例如：永久免費圖床 專業圖片上傳 永久外鏈 全球CDN分發。）
1.src 指定要加載的圖片路徑（圖片存在默認的寬高[320*240]）
2.model 決定 圖片內容 如何和 圖片的標簽 寬高 做適配（scaleToFill 默認值 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿image元素）
目前mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
詳情
3.小程序中的圖片直接支持 懶加載（lazy-load 會自己判斷 當 圖片 出現在 視口 上下 三屏的高度 之內的時候 自己開始加載圖片）
4）swiper 滑塊視圖容器(輪播圖外層容器 存在默認樣式：寬度 100% ?度 150px)
給輪播圖設置樣式：
1.先找出來 原圖的高度和寬度 等比例 給swiper 定 寬度和高度
2.swiper寬度 / swiper高度 = 原圖的寬度 / 原圖的高度
swiper高度 = swiper寬度 * 圓度的高度 / 原圖的寬度
swiper-item 是每一個輪播項
5）navigator 超鏈接標簽 （塊級元素，自動換行）
url 跳轉鏈接 相對路徑與絕對路徑皆可
target 要跳轉到當前的小程序（self）還是其他小程序界面（miniProgram）
open-type 跳轉方式
open-type 有效值：
navigate屬性值的跳轉左上角會有<號
其余關閉頁面方式的跳轉左上角會有Home小房子的圖標
exit推出別人的小程序
6）rich-text 富文本標簽
nodes 屬性 來實現接收字符串和標簽節點數組
?本節點：type = text
7）button 按鈕
size的屬性值：
type 的屬性值：
樣式可以通過wxss解決
form-type 的屬性值
open-type 的屬性值：
8）icon 字體圖標
type 圖標的類型
color 圖標的顏色
size 圖標的大小
9）radio 單選框（color：修改顏色， 需要搭配 radio-group ?起使?， 點擊觸發事件用bindchange ）
10）check-box 復選框（color：修改顏色， 需要搭配 checkbox-group ?起使?）
11）自定義組件
有一定難度，將在“【小程序】自定義組件”中詳細介紹
14.小程序的生命周期
應用生命周期app.js
頁面生命周期page.js
onLoad≈onLaunch
onHide切后臺或跳轉到其他頁面
onPullDownRefresh需要在app.json的window選項中或頁面配置中使能enablePullDownRefresh
onResize使小程序中的頁面屏幕旋轉時觸發，需要在app.json的window段中設置"pageOrientation": "auto"，或在頁面 json 文件中配置"pageOrientation": "auto"。
HTML JavaScript 小程序
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
