微信公众平台号创建+appid获取
参考https://developers.weixin.qq.com/miniprogram/dev/
项目构成文件理解
项目结构如下:
- .json 后缀的 JSON 配置文件 ------》配置数据
- .wxml 后缀的 WXML 模板文件 ------》类似html,展示
- .wxss 后缀的 WXSS 样式文件 ------》类似css,样式
- .js 后缀的 JS 脚本逻辑文件 ------》js逻辑
配置:json
配置文件可以看到有两个:
1、project.config.json;
2、app.json,index.json;
根目录下:project.config.json 为全局配置
{
//描述信息
"description": "项目配置文件",
//打包配置选项:忽略对应文件,这里为空
"packOptions": {
"ignore": []
},
//项目设置项
"setting": {
//检查案例域名和TLS
"urlCheck": true,
"es6": true,
//样式自动补全
"postcss": true,
//自动压缩
"minified": true,
"newFeature": true,
"autoAudits": false
},
//编译类型:小程序
"compileType": "miniprogram",
"libVersion": "2.4.2",
"appid": "未知",
"projectname": "HellowWorld",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
app.json进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
这里copy官方代码:
{
//用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
"pages": ["pages/index/index", "pages/logs/index"],
//定义小程序所有页面的顶部背景颜色,文字颜色定义等。
"window": {
//最上边导航栏标题
"navigationBarTitleText": "Demo"
},
//底tab栏的表现
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
//网络超时时间
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
//是否开启调试模式
"debug": true,
//导向另一个小程序id
"navigateToMiniProgramAppIdList": ["xxxx未知xxxx"]
}
wxml模板
copy官方文档代码学习:
//view 相当于html中的div,class还是熟悉的味道
<view class="container">
<view class="userinfo">
//{{xxx}}中类似js逻辑
<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>
js逻辑
App()函数用来注册一个小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
只调用一次
App({
onLaunch() {
// 小程序启动之后 触发
}
})
详细api官方文档很详细,这里只用于记录下学习过程。