微信小程序结构
每个小程序页面都有三个基础文件组成
Paste_Image.png
1 . json文件是用来对页面进行配置的
{
"pages": [
"pages/index/index",
"pages/list/list",
"pages/draw/draw"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f0f0f0",
"navigationBarTitleText": "一笔到底",
"navigationBarTextStyle": "black"
}
}
2 . wxml这里是结构层相当于html
因为小程序定位并不是html 所以结构层与html有很大的不同，更像是angularjs自定义的指令
<view>
<view class="page-top">
<text class="username">恭喜你</text>
<text class="text-info">成功地搭建了一个微信小程序</text>
<view class="page-btn-wrap">
<button class="page-btn" bindtap="gotoGallery">进入画廊</button>
</view>
</view>
<view class="page-bottom">
<text class="qr-txt">分享二维码邀请好友结伴一起写小程序！</text>
<image src="../../images/qr.png" class="qr-img"></image>
<image src="../../images/logo.png" class="page-logo"></image>
</view>
</view>
3 . wxss 样式层 相当于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 进行调试
module.exports = {
host: "www.qcloud.la",
basePath: "/applet/session"
}
