小试微信小程序开发

     微信小程序,是微信团队在2016年初进行打造的,内置在微信,不需要安装即可使用的应用,随着微信全面开放申请后,企业及个人都可以进行开发小程序。

    开发小程序首先需要在微信小程序上面申请一个帐号,点击进入官网,找到小程序进行注册。111

     按照官网流程正确填写相关信息就可以完成注册了,注册完成后,在后台页面可以找到AppID,小程序的 AppID 相当于小程序平台的一个身份证,后续会在很多地方要用到 AppID,接下来我们可以下载微信web开发者工具开发小程序,需要注意的一点是目前开发工具仅支持Windows Mac OS 平台下进行开发使用。

    打开微信web开发者工具后,使用微信扫码进行登录,选择小程序项目,进行添加。在该栏,我们需要填写AppID,给项目设定一个名称,设置开发路径就可以看到小程序的开发面板了。

    下面介绍下小程序目录结构,这边以官方提供的demo为例子,点击下载demo我们可以先看看整个小程序的目录。

222

     images文件夹是用来存放项目中使用到的图标,小程序项目的整体大小不能超过2M,小程序过大也会影响首页加载速度,因此建议将其他图片资源可以放在服务器上面。 pages目录是用来存放我们开发中用的每一个页面的。util 文件夹可以存放一些工具类。vendor文件夹则是我们引用SDK的地方。app.jsapp.jsonapp.wxss 也是整个项目中必不可少的一部分,app.js对应了整个程序从启动到关闭小程序的生命周期,项目中的全局变量也存放在这里。app.json对应了小程序的全局配置信息,其中包括项目中用到的所有页面路径、界面表现、网络超时时间、底部tab等。app.wxss对应了项目中公共的一些页面样式信息,和平常web开发中使用到的CSS是比较类似的,有一点需要注意的是微信小程序开发的尺寸单位是rpxrpx是能够根据屏幕宽度进行自适应大小的,以iPhone 6 为例,2rpx = 1px

    然后在了解下每一个页面的组成,每一个页面对应pages目录下面的一个文件夹。333

     这里官方demo进行了分类,以pages目录下面的button为例,在button文件夹下面我们可以看到一个页面是由button.js button.wxml button.wxss button.json四部分组成。button.js 是和用户进行交互的,可以响应用户的点击及各种请求等,同时也声明了整个页面的生命周期,在小程序里面,我们通过编写js文件来处理用户的操作。button.wxml 和我们在网页开发中的HTML 非常相似,由标签及属性组成,但也有不一样的地方,我们看到的元素如viewtext等都是微信经过处理封装的,小程序的wxml页面不支持js直接操控DOMjs用来获取服务器数据,通过{{}}的语法把一个变量绑定到界面上来,和angularJS中的数据双向绑定比较相像,看起来清晰明了。button.wxss 和我们上面介绍到的app.wxss一样,它主要用来控制当前button.wxml中元素的样式。button.json是用来管理一些配置信息的,我们可以在这里设置页面的title信息,或者页面的下拉刷新等等。

     在了解完这些东西后,我们就可以开发自己的小程序了,遇到不懂的可以多多查阅官方文档,官方也会不定期更新一些新的API及开放功能,这也是值得好好学习的。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注