入坑微信小程序

自从去年张小龙提出小程序的概念以来,小程序这个词在这一年间就一直萦绕在大家的耳边,而小程序也不负众望,经过一年的准备终于在今年1月8日正式与大家见面。它依托微信平台,采用hybird技术,既能有接近native应用的交互体验,又具有H5应用随用随取免安装的方便快捷,一时间受到了相当程度的热捧。那么今天,就向大家介绍一下如何利用微信提供的开发工具来开发微信小程序。

开发工具下载链接

小程序开发工具下载地址:小程序开发工具

开始正式旅程

  • 安装过后进入的第一个页面,微信扫码下一步,按照截图一步一步来


    首次进入开发工具

    选择第一个
设置项目目录和文件名

开发界面

开发界面

从这里正式进入到开发页面,左侧三个主选项卡,分别为编辑,调试,项目。

  • 编辑:点击编辑,右侧会出现项目目录,选中文件后就可以进行代码编写了。


    编辑界面
  • 调试:点击界面我们会看到如图内容,主要作用是查看查看报错信息,网络请求状态,页面层次结构,动态调试JS等
调试界面
  • 项目:主要显示项目配置信息,在 0.10.101000 以及之后版本的开发工具中,会默认使用 babel 将开发者代码 ES6 语法转换为三端都能很好支持的 ES5 的代码,帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。


    项目界面

项目文件结构

代码文件主要有.json(全局配置文件),.js(JavaScript),.wxml(布局文件),wxss(样式文件)这4种格式的文件。

.wxml类似于web开发中的.html文件,而.wxss类似于.css文件。

文件结构

小程序的入口

小程序在启动时会创建App instance,也就是我们当前小程序的实例,其中会利用这三个文件app.json、app.js、app.wxss,对小程序进行全局配置。

app.json

该文件用于对小程序进行全局配置。其实每个页面也都可以有一个这样的配置文件,不过与app.json不同的是,页面json文件只能设置window下的样式。

配置包括:
pages:页面文件路径
window:窗口表现
networkTimeout:设置各种网络请求的超时时间
tabBar:设置多 tab
debug:是否开启 debug 模式

app.json内容说明
app.js

小程序逻辑层代码在这里实现,通过js编写,小程序的生命周期就在这里实现,同iOS appdelegate里面的生命周期类似。

App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
}, globalData: 'I am global data'})

app.js初始代码解析
app.wxss

这个不多说,类似于web开发中css的一个外联文件,设置整个应用程序的样式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容