微信小程序开发一小程序代码构成
微信小程序开发（一）：小程序代码构成
通过开发工具创建一个项目后，在项目目录中自动生成里四种不同类型的文件
JSON配置
1、JSON是一种数据格式，在小程序中的作用主要是保存一些静态配置
2、JSON文件中不能使用注释
小程序配置app.json
当前小程序的全局配置，包括小程序的所有页面路径、界面表现、网络超时事件，底部tab等：
1、
pages
字段用于描述当前小程序所有页面路径
2、
window
字段用于定义小程序
所有页面
的顶部背景颜色、字体颜色等
3、
tabBar
字段用于定义底部tab
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/index",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}开发工具配置project.config.json
创建项目时会在根目录生成一个project.config.json文件，用来保存coder在开发工具上做的配置，比如界面颜色、编译配置等，coder需要重新安装开发工具或者更换电脑时，只需要导入同一个项目的代码包，开发工具就会自动回复项目开发时的个性化配置
页面配置page.json
1、小程序的每一个页面都有一个对应的JSON文件
2、用来表示同目录下的小程序页面的相关配置，独立定义每一个页面的一些属性
3、
page.json
文件中个性化设置优先级高于app.json中的设置
WXML文件
1、
WXML
充当网页开发中
HMTL
的角色，用来描述当前页面的结构
2、
WXML
中有一些特有的标签，如
view
、
text
等
3、小程序提倡
渲染和逻辑分离
，提供了
MVVM
的开发模式，不需要让js直接操作DOM，只需要管理状态，通过一种模板语法描述状态和界面结构的关系
4、通过{
{}}数据绑定语法把变量绑定到界面上，并且通过
wx:if / wx:else, wx:for
等来控制属性的表达
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>WXSS样式
1、
WXSS
具有
CSS
大部分的特性
2、
WXSS
和
CSS
相比，增加了新的尺寸单位
rpx
(
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx
)
3、
WXSS
只支持部分选择器（
.class
、
#id
、
element
、
::after
、
::before
）
JS逻辑脚本
js脚本用来处理用户的操作，如：响应用户的点击、获取用户的位置等.
<view>{{ msg }}</view>
<!-- 使用bindtap绑定鼠标点击事件 -->
<button bindtap="clickMe">点击我</button>Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})