⼩程序开发--【HelloWorld及代码结构】（⼆）
前⾔
通过上⼀篇我们已经完成了注册及开发环境的搭建，今天我们来开发我们的第⼀个⼩程序
附开发⼯具下载地址：
⽅便上⼀篇没有安装的同学。
运⾏Hello World
⾸先打开我们的Web开发者⼯具，然后⽤⾃⼰的账号扫码登陆，接着选择⼩程序就会看到我们接下来的画⾯：如图：
这⾥我们点击⼩程序/⼩游戏会出现⼀个测试appid，接下来点击确定，会进⼊到我们的开发界⾯：
如图：
此时点击编译按钮
如图：
现在我们可以在左侧模拟器点击获取头像昵称**，授权后就会出现我们⾃⼰的头像和昵称信息如图：
也可以通过预览和真机调试，点击后只需要扫描⼆维码即可。
代码构成
如图：我们可以看到四种类型的⽂件
1 .json 后缀的 JSON 配置⽂件
2 .wxml 后缀的 WXML 模板⽂件
3 .wxss 后缀的 WXSS 样式⽂件
4 .js 后缀的 JS 脚本逻辑⽂
json配置
我们可以看到在项⽬的根⽬录有⼀个 app.json 和 fig.json，此外在 pages/logs ⽬录下还有⼀个 logs.json，我们依次来说明⼀下它们的⽤途。
⼩程序配置 app.json
⼩程序根⽬录下的 app.json ⽂件⽤来对⼩程序进⾏全局配置，决定页⾯⽂件的路径、窗⼝表现、设置⽹络超时时间、设置多 tab 等。DEMO⾥的app.json代码如下：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
我们简单说⼀下这个配置各个项的含义:
1、pages字段 —— ⽤于描述当前⼩程序所有页⾯路径，这是为了让客户端知道当前你的⼩程序页⾯定义在哪个⽬录。
2、window字段 —— 定义⼩程序所有页⾯的顶部背景颜⾊，⽂字颜⾊定义等。
更多详细属性参见
⼯具配置 fig.json
⼯具配置就相当于我们对当前的idea进⾏了界⾯配置、编译配置等，只不过⼩程序把这个配置⽂件写⼊了⼯程中，当我们换⼀台电脑打开同⼀个⼯程，你会发现还是原来的味道。避免了有些同学换台电脑就不会编程的痛苦。
我们看⼀下DEMO⾥⾯的⼯具配置⽂件：
{
"description": "项⽬配置⽂件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.0.4",
"appid": "wxe7c297ecaaaa0735",
"projectname": "%E5%B0%8F%E7%A8%8B%E5%BA%8F",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
我们简单说⼀下这个配置各个项的含义:写文章的小程序
packOptions ⽤以配置项⽬在打包过程中的选项。打包是预览、上传时对项⽬进⾏的必须步骤。
setting 项⽬设置，包括（是否启⽤ es6 转 es5，上传代码时样式是否⾃动补全、上传代码时是否⾃动压缩、是否进⾏代码保护等）compileType 编译类型
appid 项⽬的 appid，只在新建项⽬时读取
projectname 项⽬名字，只在新建项⽬时读取
debugOptions 调试配置选项
更多详细参见
页⾯配置 page.json
这⾥的 page.json 其实⽤来表⽰ pages/logs ⽬录下的 logs.json 这类和⼩程序页⾯相关的配置。
如果你整个⼩程序的风格是蓝⾊调，那么你可以在 app.json ⾥边声明顶部颜⾊是蓝⾊即可。实际情况可能不是这样，可能你⼩程序⾥边的每个页⾯都有不⼀样的⾊调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独⽴定义每个页⾯的⼀些属性，例如刚刚说的顶部颜⾊、是否允许下拉刷新等等。
我们来看⼀下DEMO中的logs.json和index.json
logs.json中重新定义了标题
{
"navigationBarTitleText": "查看启动⽇志"
}
index.json中没有做任何修改，也就是完全使⽤app.json中的配置信息
{}
其他配置项细节可以参考⽂档 。
WXML 模板
从事过⽹页编程的⼈知道，⽹页编程采⽤的是 HTML + CSS + JS 这样的组合，其中HTML 是⽤来描述当前这个页⾯的结构，CSS ⽤来描述页⾯的样⼦，JS 通常是⽤来处理这个页⾯和⽤户的交互。
同样道理，在⼩程序中也有同样的⾓⾊，其中 WXML 充当的就是类似 HTML 的⾓⾊。
我们来看⼀下⾸页pages/index/index.wxml
<!--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>
和 HTML ⾮常相似，WXML 由标签、属性等等构成。但是也有很多不⼀样的地⽅，我们来⼀⼀阐述⼀下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。