微信小程序代码构成

一.小程序代码

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

页面构成

<!--index.wxml-->

<view class="container">

  <view class="userinfo">

    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

    <block wx:else>

      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

      <text class="userinfo-nickname">{{userInfo.nickName}}</text>

    </block>

  </view>

  <view class="usermotto">

    <text class="user-motto">{{motto}}</text>

  </view>

</view>

　wxml和html极其类似,xwml由标签、属性等等构成。但是有很多不一样的地方,我们一一阐述一下：

　　实际上wxml最后还是会转换成html,但如果写一个良好的页面,需要众多的标签,而wxml已经封装好了

　　在标签中添加了wx:else这样的属性这种表达式,就像MVVM模式,把渲染和逻辑分开,简单的来说就是Js不操作Dom、js管理状态即可。

JS交互逻辑

一个服务仅仅只是页面展示是不够的、还需要和用户做教育、我们就可以编写JS脚本文件处理用户的操作

<view>{{ msg }}</view>

<button bindtap="clickMe">点击我</button>

点击button按钮的时候,我们希望吧msg变成Hello world

Page({

  clickMe: function() {

    this.setData({ msg: "Hello World" })

  }

})

响应用户的操作就是这么的简单！

巴特西

微信小程序代码构成

页面配置 page.json

工具配置 project.config.json

最新文章

热门文章