微信小程序結(jié)構(gòu)
每個(gè)小程序頁面都有三個(gè)基礎(chǔ)文件組成
Paste_Image.png
1 . json文件是用來對(duì)頁面進(jìn)行配置的
{
"pages": [
"pages/index/index",
"pages/list/list",
"pages/draw/draw"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f0f0f0",
"navigationBarTitleText": "一筆到底",
"navigationBarTextStyle": "black"
}
}
2 . wxml這里是結(jié)構(gòu)層相當(dāng)于html
因?yàn)樾〕绦蚨ㄎ徊⒉皇莌tml 所以結(jié)構(gòu)層與html有很大的不同，更像是angularjs自定義的指令
<view>
<view class="page-top">
<text class="username">恭喜你</text>
<text class="text-info">成功地搭建了一個(gè)微信小程序</text>
<view class="page-btn-wrap">
<button class="page-btn" bindtap="gotoGallery">進(jìn)入畫廊</button>
</view>
</view>
<view class="page-bottom">
<text class="qr-txt">分享二維碼邀請好友結(jié)伴一起寫小程序衅码！</text>
<image src="../../images/qr.png" class="qr-img"></image>
<image src="../../images/logo.png" class="page-logo"></image>
</view>
</view>
3 . wxss 樣式層 相當(dāng)于CSS
語法和css一樣隅津，且可以使用flex盒子布局
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
4 . js文件
這里就是js代碼了列赎，但是語法和js也有差別 好多原有js原始方法不能使用魏保，其中比較明顯的就是 Alert 不能使用彻秆，只能使用console.log 進(jìn)行調(diào)試
module.exports = {
host: "www.qcloud.la",
basePath: "/applet/session"
}
