微信小程序学习笔记
上周微信小程序游戏“跳一跳”很火, 其实这是微信推广小程序的套路。 基于好奇心, 我仔细学习了小程序开发的知识。
1、小程序脚本语法类似于JavaScript, 文件后缀是.js;不同的是微信提供了wx前缀的API。
2、界面布局仍用常见的xml标签方式, 文件后缀是wxml;
3、 界面样式文件后缀是wxss(即WeiXin Style Sheet的缩写), 格式跟css类似,具体定义可参看菜鸟教程css
跟App Store的套路相同, 想发布微信小程序必须要去微信开发者网站注册账号并且填写项目信息。PS:貌似一个账号只能申请一个项目???
申请账号后要配置项目的各项信息, 微信不让上线测试版本, 但是可以设置体验版本并添加若干个测试用户。 如果是练手小程序或项目处于开发周期, 那么就要在上传代码后设置为体验版本。
在“用户身份”里添加开发者、体验者的微信账号, 然后扫一扫这个二维码就可以看到你开发的小程序了。
微信禁止发布demo和测试版, 初学者就不要尝试发布了。
下面看看小程序的IDE, 相信码农一看就懂。
项目一级目录包含4个文件和2个文件夹。
app.json类似于iOS的plist和Android的AndroidManifest.xml,就是小程序的配置文件。
app.js类似于iOS的UIApplicationDelegate和Android的Application类;
app.wxss类似于Android的styles.xml,它即定义全局样式的文件。 每个页面page可以自定义wxss,界面渲染时以当前界面的wxss为准(即优先级更高)。
project.config.json是项目配置文件, 定义一些项目参数。
pages是所有界面的根目录, 可以按照功能模块以树形结构定义目录层级。
utils是公用脚本目录, 可以定义若干个js文件, 每个文件实现不同的功能函数。
注意: 所有界面的js一定使用Page, app.js一定使用App。 在app.js可以定义全局变量(小程序只有一个App实例,即单例), 所有界面js可以通过getApp()函数读写全局变量。
小程序UI设计限制:
微信小程序限制最多缓存5级界面, 所以在设计小程序时界面层级不能超过5层(从主页开始算)。
小程序存储设计:
小程序提供了简单的Key/Value读写函数(wx.getStorage/wx.setStorage), 类似于Android的SharedPreferences和iOS的UserDefaults。 不支持数据库!!!
网络能力:
小程序提供了wx.request函数实现HTTP请求, 并提供了json序列化和反序列化的方法。
多媒体能力:
界面支持显示音频、视频控件和相应的控制逻辑(停止、暂停、播放等)
地图能力:
支持获取定位信息和地图控件(支持缩放、移动等)。
控件:
提供了按钮、文本、下拉刷新、列表、swipe滑动栏、radio按钮、进度条、checkbox、tab分页、地图、音频、视频、view、scroll-view、web-view等常用控件。
事件:
支持点击、长按、滑动等消息。
画图:
支持自定义canvas, 小程序“跳一跳”应该就是在canvas上画的。
动画:
支持简单的动画。
调试:
IDE提供了调试器, 有点像FireBox的FireBug。 可以分析小程序的性能、错误等。
总之, 小程序的定位就是简单易操作的流量入口, 可以实现一些基本的操作,并导流安装自己的app。