微信小程序制作(一)
什么是小程序?
小程序是一个基于微信的app,便于进行混合式开发。可以在安卓,ios,pc上运行。
微信小程序开发工具
官方在网站发布了最新版本的微信小程序开发工具,
http://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
开发第一个微信小程序
- 获取小程序的appid
开发者开发的微信小程序要发布到微信运行的话,首先要获取小程序的appid。
注意:这是小程序专属的appid,不要和微信服务号和公众号的id搞混 - 创建项目
2.1 登录
2.2 添加项目
2.3 微信小程序主要文件
app.js、app.json、app.wxss
其中js是脚本文件,json是配置文件,wxss是样式表文件
提示:如果创建项目时没有选择“在当前目录中创建quick start项目”复选框,项目目录中将不会添加任何文件。 - 认识开发工具
3.1.模拟器
首先进入微信小程序开发工具后就看到的是调试界面,在这个界面中,模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大多数的api均能够显示出正确的状态。
如果在微信小程序中用到了多窗口,上方将增加一个”正在调试2个页面“的提示(这个功能是为了方便开发者设计的,实际小程序中没有)
3.2.调试工具
console,sources,network,appdata,storage,wxml
3.2.1 console
控制面板
可以直接在console中输入javascript代码并立即执行。
3.2.2 sources
脚本文件
与浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在sources面板中开发者看到的文件是经过处理的脚本文件,开发者的代码都会被包裹在define函数中,并且对于page代码,在尾部会有require的主动调用。
3.3.3 network
用于观察和显示网络请求request和socket的情况。通过这个面板可对网络请求进行调试。微信小程序作为前台表示层,通常需要访问后台服务程序。前后台之间的交互需要通过网络接口来是西安。这是就需要通过network面板来观察发送的请求和接受的响应数据是否相同。
3.3.4 appdata面板
appdata面板用于显示当前项目中的具体数据。
3.3.5 storage面板
storage面板用于显示当前项目使用本地存储的情况。在小程序中可以使用wx.setStorage或者wx.setStorageSync将数据保存到本地。
3.3.6 wxml面板
wxml面板用于帮助开发者查看wxml转化后的界面。在这里可以看到真实的页面结构以及结构对应的wxss属性,同时可以通过修改wxss属性,在模拟器中看到修改的结果。
在调试小程序的界面布局时,经常需要在右侧输入wxss代码,然后查看左侧模拟器中是否达到效果,最后将达到效果的wxss代码复制到对应的wxss文件中即可。