微信小程序是微信官方推出的轻应用,以手机端类似于网页的形式构造微信内等同于App的用户体验。小程序在这两年逐渐发力,逐渐成为了应用市场上不可忽视的一个重要组成部分。我们着手开发小程序时,可能会遇到以下几个问题:
1.小程序是html5制作的吗
可以说小程序源于h5,从事前端的朋友们如果看到了小程序创建项目自动生成的代码就会发现,小程序的代码与React.Js的代码非常类似,这对于从事React Native或使用React.js来工作的前端或者移动端程序员非常友好,同时,只要熟悉前端的朋友就会发现,wxss,js,wxml的编写与前端开发中的css,js,html的写法几乎完全一样。所以前端程序员开发小程序应该是毫无压力的
小程序的开发模式
小程序允许有一个管理者和多个开发者,这给了企业开发者更方便的开发方式,更加适应集体开发模式。同时,小程序也有官方的开发者工具,同时在sublime等开发者工具上也都能进行小程序开发,相信后续也会有更多的IDE厂家进行插件或者IDE开发。另外,本地进行开发式,可以选择不检验域名安全性调试。一旦提交审核,那么提供接口的域名必须是https形式的。后台人员在配置时,需要配置好SSL证书。
小程序的真机调试
小程序可以在没有在小程序官方appid的情况下进行开发工具上的预览,但是如果你想要在你的手机上预览,则必须填写appid。否则会出现上传和预览按钮不能点击的情况
当你填入小程序的appid并创建项目后,上图所示的上传和测试按钮便可以点击了。小程序可以上传多个版本给微信官方进行审核,这个过程和App store的审核类似。
小程序的结构
如图
pages中是所有页面的集合
app.js是应用全局的一些控制。
app.json文件对页面整体结构进行了控制,
app.json文件内容
{
"pages":[
"pages/list/list",
"pages/board/board",
"pages/item/item",
"pages/search/search",
"pages/logs/logs"
],
"window":{
"navigationBarBackgroundColor": "#35495e",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "电影",
"backgroundColor": "#fff",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true
},
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/delSelected.png",
"iconPath": "images/del.png",
"pagePath": "pages/board/board",
"text": "首页"
},
{
"selectedIconPath": "images/setSelected.png",
"iconPath": "images/set.png",
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
pages定以的是所有的页面,默认会显示排在第一个的页面
tabbar显示的是第一个应用底部的标签。
app.wxss是全局的样式控制。