色婷婷五月综合久久中文_亚洲性爱毛片免费看_21国产精品喷潮白浆_国产精品无码亚洲精品2022_久久久亚洲国产精品性色

一、目錄文件詳解

1.首先看下根目錄下的app.json的文件，可以看到在”pages”的數(shù)組里，里面配置了每個(gè)界面，且包含了每個(gè)界面文件的目錄

2.可以看到每個(gè)頁面需要包含兩個(gè)文件，一個(gè)是js文件，是每個(gè)界面的入口，wxml的文件是每個(gè)界面的布局文件，那wxss是什么呢？它是每個(gè)界面的樣式文件。比如：看下圖可以看到，創(chuàng)建新的項(xiàng)目有兩個(gè)界面，一個(gè)是index.js界面，一個(gè)是logs.js的界面，且都有對應(yīng)的布局文件（.wxml）和樣式文件（.wxss）

3.可以看到在logs文件夾中比index文件夾中多出了一個(gè)logs.json的文件，這個(gè)文件是干嘛的呢？可見，這個(gè)文件不是必須的，因?yàn)閕ndex界面的文件夾中就沒有這個(gè)文件，logs.json這個(gè)文件配置了一個(gè)界面的title的信息

具體效果可以看下gif圖

總結(jié)

1.根目錄下的app.js是整個(gè)程序的入口，app.json配置整個(gè)程序的信息

2.一個(gè)微信小程序必需包含的文件只需要有app.js和app.json以及對應(yīng)界面的js文件和布局文件（.wxml）就可以了

二、視圖渲染

一：創(chuàng)建一個(gè)頁面

1.首先我們新建一個(gè)項(xiàng)目，在新建的項(xiàng)目中有index 頁面和 logs 頁面，即歡迎頁和小程序啟動(dòng)日志的展示頁，他們都在 pages 目錄下。微信小程序中的每一個(gè)頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個(gè)頁面是小程序的首頁。

每一個(gè)小程序頁面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。

好了，然后我們新建一個(gè)自己的頁面，首先建一個(gè)文件夾（myPage），在文件夾下創(chuàng)建對應(yīng)的布局文件（myPage.wxml）和js文件（myPage.js），最后記得在app.json中配置頁面信息，在app.json中需要注意了，在pages的數(shù)組里，第一個(gè)代表著啟動(dòng)時(shí)第一個(gè)加載的頁面

2.然后進(jìn)入調(diào)試界面，點(diǎn)擊重啟按鈕，看下效果，會(huì)發(fā)現(xiàn)在控制臺(tái)中彈出了報(bào)錯(cuò)的信息，如下：

3.看報(bào)錯(cuò)的信息，很清楚的知道在myPage.js文件中沒有找到Page方法，因此我們在myPage.js文件中調(diào)用Page方法，然后調(diào)試，重啟，就會(huì)發(fā)現(xiàn)不報(bào)錯(cuò)了！

4.好了，在第一點(diǎn)中也說到，在app.json中pages的數(shù)組里，第一個(gè)代表著啟動(dòng)時(shí)第一個(gè)加載的頁面，那好我們把順序調(diào)轉(zhuǎn)一下，就可以驗(yàn)證我們的結(jié)論了

建議看官方的教程：https://mp.weixin.qq.com/debug/wxadoc/dev/

二、組件的使用和數(shù)據(jù)的綁定

1.要了解微信小程序組件的使用，最好的方法就是查看微信小程序的API文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

可以看到API文檔詳細(xì)的介紹了各種組件的使用，要熟悉組件的使用，最好的方式就是多練了!

2.看著文檔，把官方文檔的例子直接貼進(jìn)來，然后我們也創(chuàng)建一個(gè)text組件，看看效果先吧：

結(jié)合代碼進(jìn)行分析：

js代碼：

三、渲染標(biāo)簽

微信小程序給我提供了兩種渲染標(biāo)簽：

1.判斷標(biāo)簽wx:if和wx:else

雖然之前沒有接觸過js，可是代碼也挺容易理解的，邏輯思維跟Android還是有點(diǎn)像，不過想學(xué)好，還是要學(xué)下js的，所以最近我也會(huì)學(xué)下js

最后我們看下效果圖吧，可以看到當(dāng)位true的時(shí)候就顯示1 false時(shí)顯示2

2.循環(huán)標(biāo)簽（wx:for）

看下循環(huán)標(biāo)簽在布局文件中的使用吧

看下效果圖：

四、樣式模板的使用

從上面的代碼就可以看到，一個(gè)界面可能會(huì)用到很多布局的代碼，可是界面與界面之間可能會(huì)有很多重復(fù)的樣式，然而這些樣式的代碼，每次都要重新寫就很麻煩了，而且也浪費(fèi)資源，微信小程序像其他開發(fā)一樣，也有樣式模板的使用方式

1.使用include的方式包含模板樣式 
例如：<include src="../templates/myText" /> 
具體的使用看圖片：

使用這種方式引用模板，實(shí)際上就是等同于把templates中的myText的代碼全部復(fù)制到include這里

2.使用import的方式 
例如：

<!--模板樣式的使用  底部樣式-->
<import src="../templates/footer"  />
<template is="footer1" />
1
2
3

最后看下效果圖： 

Demo下載地址：Text1.zip