由于微信小程序目前处于内侧阶段,因此Demo是在无AppId情况下创建的.
微信web开发者工具 v0.9.092300 下载地址:http://wxopen.bcoder.cn/download.html 官方文档:http://wxopen.bcoder.cn/index.htm
开发者工具安装完成后,打开并使用微信扫码登录。选择创建「项目」,填入上文获取到的 AppID,设置一个本地项目的名称(非小程序名称),比如「我的第一个项目」,并选择一个本地的文件夹作为代码存储的目录,点击「新建项目」就可以了。
为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择「是」,开发者工具会帮助我们在开发目录里生成一个简单的 demo。
![][jane-createApp-pic] [jane-createApp-pic]: image/createApp.png
项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在「编辑」里可以查看和编辑我们的代码,在「调试」里可以测试代码并模拟小程序在微信客户端效果.
![][jane-eyre-pic] [jane-eyre-pic]: image/Snip20161031_1.png
- app.js - 小程序的脚本代码,声明全局变量
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
globalData: 'I am global data'
})
- app.json - 小程序的全局配置,配置小程序的窗口背景色,配置导航条样式,配置默认标题
"window":{
"backgroundTextStyle":"light",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "Small App",
"navigationBarBackgroundColor": "#000000",
"backgroundColor": "#fbf9fe",
"enablePullDownRefresh": true
}
- app.wxss - 小程序的公共样式表
/**app.wxss**/
@import "./style/layout.wxss"; `通过import引入其他样式表`
.container {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
- style — 存放独立wxss文件,可import引入
- image — 存放项目图片
- pages — 存放项目页面相关文件
- utils — 存放utils文件(通过module.exports对外暴露接口),可require引入
微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成
- index.js
Page({
data: {
motto: 'Hello World'
}
})
- index.wxml - 页面结构文件
<text class="user-motto">{{motto}}</text>
- index.wxss
页面的样式表中的样式规则权重大于app.wxss
- index.json
页面的配置文件.json会覆盖app.json 的 window 中相同的配置项
- 逻辑层
- 注册程序
- 通过全局函数getApp()可以获取全局的应用实例,如果需要全局的数据可以在App()中设置
- 注册页面
- 模块化
- 我们可以将一些公共的代码抽离成为一个单独的js文件,作为一个模块。模块只有通过module.exports才能对外暴露接口。
- API
- 路由
- wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面,一个应用同时只能打开5个页面
- wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面
- wx.navigateBack():关闭当前页面,回退前一页面
- 注册程序
- 视图层
- 条件渲染
- 列表渲染
- 模板
- 事件
- 引用