小程序的文件類型

在微信小程序中有四種文件類型，主要分樣式，骨架，業(yè)務(wù)，配置，樣式為wxss，這里的wxss與頁面的css相類似，骨架為wxml，這里的wxml于頁面的html相類似，業(yè)務(wù)邏輯都是以js為結(jié)尾，配置文件為json結(jié)尾。

以.json為后綴的文件為json配置文件，以.wxml為后綴的文件為wxml模板文件，以.wxss為后綴的文件為wxss的樣式文件，以.js為后綴的文件為js腳本邏輯文件。

小程序文件結(jié)構(gòu)擁有app.js，app.json，app.wxss，Page->wxml，wxss，js，json。

json的配置，在項(xiàng)目中有

app.json project.config.json logs.json

app.json為項(xiàng)目小程序的全局配置，可以配置所有頁面的路徑，界面表現(xiàn)，網(wǎng)絡(luò)超時(shí)時(shí)間，底部tab等。

// 簡(jiǎn)書作者：達(dá)叔小生 {"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"} }

工具配置 project.config.json
頁面配置 page.json
WXML 模板

網(wǎng)頁是由HTML + CSS + JS組合的，html來描述頁面結(jié)構(gòu)的，css是用來描述頁面樣式的，js是用來使頁面和用戶交互的。

這里的wxml就和頁面中的html一樣哦！

wxml與html有點(diǎn)不一樣哦

就是標(biāo)簽不一樣，html用的是div, p, span，wxml用的是view, button, text，還有很多。還有wx:if 和 {{}} 表達(dá)式，在網(wǎng)頁是用js操作dom的，在學(xué)頁面的時(shí)候?yàn)榱撕芎玫拈_發(fā)，就有了mvvm的模式，需要我們學(xué)習(xí)react，vue等，都是把渲染和邏輯分開的，在wxml中，就是微信小程序，通過<text>{{msg}}</text>，然后在js中，this.setData({ msg: "Hello World" })，就可以通過語法把一個(gè)變量綁定在界面上。在微信小程序中，我們時(shí)時(shí)刻刻都要用的數(shù)據(jù)綁定，微信小程序還有if/else, for等控制能力，規(guī)定開頭要用wx:來表達(dá)。

全局配置app.json

pages頁面路徑列表 window默認(rèn)窗口表現(xiàn) tabBar底部 tab 欄的表現(xiàn) networkTimeout網(wǎng)絡(luò)超時(shí)時(shí)間 debug是否開啟 debug 模式

pages:

{"pages":["pages/index/index","pages/logs/logs"] }

window:

navigationBarBackgroundColor導(dǎo)航欄背景顏色 navigationBarTextStyle導(dǎo)航欄標(biāo)題顏色 navigationBarTitleText導(dǎo)航欄標(biāo)題文字內(nèi)容 navigationStyle導(dǎo)航欄樣式 backgroundColor窗口的背景色 backgroundTextStyle下拉 loading 的樣式

tabBar

color tab 上的文字默認(rèn)顏色 selectedColor tab 上的文字選中時(shí)的顏色 backgroundColor tab 的背景色 list 最少2個(gè)、最多5個(gè) tab position tabBar的位置 pagePath 頁面路徑 text tab 上按鈕文字

networkTimeout

request connectSocket uploadFile downloadFile

WXML

// 數(shù)據(jù)綁定 <view> {{message}} </view> Page({data: {message: 'Hello!'} }) // 列表渲染 <view wx:for="{{array}}"> {{item}} </view> Page({data: {array: [1, 2, 3, 4, 5]} }) // 模板 <template name="Name"><view></view> </template> <template is="Name" data=""></template>

引用提供兩種文件引用方式import和include

import

<!-- itemDemo.wxml --> <template name="itemDemo"><text>{{text}}</text> </template> <import src="itemDemo.wxml"/> <template is="itemDemo" data="{{text: 'itemDemo'}}"/>

include拷貝到 include 位置

// <!-- indexDemo.wxml --> <include src="headerDemo.wxml"/> <view> body </view> <include src="footerDemo.wxml"/> // <!-- headerDemo.wxml --> <view> header </view> // <!-- footerDemo.wxml --> <view> footer </view>

小程序的啟動(dòng)

App({onLaunch: function () {// 小程序啟動(dòng)后 觸發(fā)} })

運(yùn)行機(jī)制

冷啟動(dòng)和熱啟動(dòng)

getApp(Object)用來獲取消小程序app實(shí)例的。

程序與頁面

Page({data: {...},onLoad: function () {// 頁面渲染后 執(zhí)行} })

Page(Object)

data 頁面的初始數(shù)據(jù)

• 加載
• 顯示
• 頁面初次渲染完成
• 頁面隱藏
• 頁面卸載

尺寸單位

rpx：為可以根據(jù)屏幕寬度自動(dòng)適應(yīng)。規(guī)定屏幕寬為750rpx。

樣式導(dǎo)入：使用@import語句

/** add.wxss **/ .b-p {padding:5px; } /** app.wxss **/ @import "add.wxss"; .a-p {padding:15px; }

事件詳解

touchstart 手指觸摸，動(dòng)作開始 touchmove 手指觸摸后，移動(dòng) touchcancel 手指觸摸，動(dòng)作被打斷 touchend 手指觸摸，動(dòng)作結(jié)束 tap 手指觸摸后，馬上離開

發(fā)布前的準(zhǔn)備：用戶身份，預(yù)覽，上傳代碼，小程序的版本，上線，提交審核

在pages字段里是用來放置所有頁面路徑的，只要添加就可以自動(dòng)生成哦，window字段里是放置所有頁面的配置，如頂部的背景顏色，文字顏色等。

往后余生，唯獨(dú)有你
簡(jiǎn)書作者：達(dá)叔小生
90后帥氣小伙，良好的開發(fā)習(xí)慣；獨(dú)立思考的能力；主動(dòng)并且善于溝通
簡(jiǎn)書博客： https://www.jianshu.com/u/c785ece603d1

結(jié)語

• 下面我將繼續(xù)對(duì) 其他知識(shí) 深入講解 ，有興趣可以繼續(xù)關(guān)注
• 小禮物走一走 or 點(diǎn)贊

轉(zhuǎn)載于:https://www.cnblogs.com/dashucoding/p/9698234.html

總結(jié)

以上是生活随笔為你收集整理的小程序当中的文件类型，组织结构，配置，知识点等的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。