20161118微信小程序学习笔记-结构

微信小程序结构

每个小程序页面都有三个基础文件组成

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"
}