一.創(chuàng)建項目
1.準備工作
注冊開發(fā)者賬號(微信公眾開發(fā)平臺:https://mp.weixin.qq.com/)
安裝小程序(微信開發(fā)者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
?開發(fā)工具創(chuàng)建項目
2.認識項目目錄
pages 是存放所有視圖的目錄
utils 是存放工具類庫的目錄
assets 是存放資源庫的目錄
app.js 是小程序的全局入口文件
app.json 是小程序的全局配置文件
app.wxss 是小程序的全局樣式文件
project.config.json 是項目的配置文件
sitemap.json 是小程序的SEO優(yōu)化文件,方便用戶搜索到該小程序
3.app.json
pages里面注冊的是視圖
window 是全局窗口配置
backgroundTextStyle 設置文本樣式
navigationBarBackgroundColor 設置導航欄背景
navigationBarTitleText 設置導航欄文本
navigationBarTextStyle 設置導航欄文本樣式
style 設置樣式級別豌蟋,默認是v2
sitemapLocation 指明 sitemap.json 的位置廊散;默認為 'sitemap.json' 即在 app.json 同級目錄下名字的 sitemap.json 文件
?4.app.wxss
是小程序的全局樣式文件,其實就是css文件(配置所有頁面需要的樣式)
5.project.config.json
是小程序的項目配置文件梧疲,也可以通過:詳情-本地設置
6. 頁面組成
xxx.wxml 是頁面允睹,相當于html文件,但是它里面不能寫原生的html標簽幌氮,只能寫微信自己的組件缭受。
xxx.wxss 是樣式,相當于css文件该互。
xxx.js 是js文件米者,書寫頁面邏輯程序。
xxx.json 是配置文件,配置當前頁面信息蔓搞。
7. xxx.wxml
view組件胰丁,相當于html中的div標簽。
text組件喂分,相當于html中span標簽锦庸。
swiper是滑塊視圖組件,它里面只能放swiper-item組件蒲祈。
image是圖片組件甘萧,注意:小程序里面的圖片最好全部采用網(wǎng)絡圖片,因為單個小程序打包后的代碼總體積不能超過2MB梆掸。
通過插值表達式{{}}扬卷,可以執(zhí)行顯示data里面的數(shù)據(jù)。
wx:for指令用于循環(huán)數(shù)組數(shù)據(jù)酸钦,生成組件怪得。
item就是循環(huán)出來的每一項,index是每一項對應的索引钝鸽。
item和index可以重命名汇恤,方式是wx:for-item="XXX" wx:for-index="XXX"。
wx:key="index"拔恰,設置每一項唯一的標識。
bindtap是點擊事件基括,組件通過data-xxx傳遞數(shù)據(jù)颜懊。
8. xxx.wxss
微信為了讓頁面里面的內(nèi)容在各種設備上能夠正常顯示,提供了一種響應式單位rpx风皿。
在iphone6尺寸中河爹,1px==2rpx。
9. xxx.js
其實每個微信頁面桐款,就是一個Page()函數(shù)咸这。該函數(shù)的參數(shù)是一個對象。
在Page()函數(shù)中添加頁面的數(shù)據(jù)魔眨,方法等等媳维。
頁面中的數(shù)據(jù),全部放到data中遏暴。
定義方法:
del(e){//獲取組件傳遞的參數(shù)i(i是索引)let? i=e.currentTarget.dataset.i//根據(jù)指定的索引侄刽,從數(shù)組中,刪除對應的數(shù)據(jù)this.data.goodsList.splice(i,1)//數(shù)組中的數(shù)據(jù)刪除后朋凉,還要觸發(fā)頁面更新this.setData({//將最新的數(shù)據(jù)州丹,傳遞給頁面顯示goodsList:this.data.goodsList})}//this指向當前頁面對象。//setData()方法,觸發(fā)頁面更新哪些數(shù)據(jù)墓毒。
10. xxx.json
配置當前頁面信息吓揪,用法跟app.json一樣。