https://github.com/wxappbook
下载M
,使得下载、安装(部署)过程特别快,用户在感官上察觉不到它在安装而已图16 绑定开发者
AppID
,如图17所示。AppID
十分重要,只有填写了AppID
的项目才能通过手机微信扫码进行真机测试1)打开微信开发者工具。第一次启动需要扫描二维码登录
图19 登录微信开发者工具
2)登录后选择“添加项目
3)在填写项目信息之前,先创建一个空目录作为项目资源目录,这里我们以E:\weixin\demo
为例
4)填写项目信息。如果没有AppID
可以选择“无AppID
”;填写项目名称,项目名称在微信开发者工具中是唯一的;项目目录选择刚才创建的空目录,这里一定要保证刚才创建的目录为空目录,这样下面会出现“在当前目录中创建quickstart
项目”选项
修改index.wxml
,将“{{motto}}
”替换为“我的第一个小程序
填写了AppID
的项目可以选择“项目→预览”(如图1-14所示),扫描二维码在微信中体验项目
官方资料:http://mp.weixin.qq.com/debug/wxadoc/introduction
视图层
和逻辑层
WXML
(WeiXinMarkupLanguage
)和用于描述WXML
组件样式的WXSS
(WeiXinStyleSheets
)组成,它们的关系就像HTML
和CSS
的关系JavaScript
引擎的JavaScript
代码,在此基础上框架实现了一套模块化机制,让每个JS
文件有独立的作用域和模块化能力,这套模块化机制遵循CommonJS
规范,熟悉NodeJs
的开发者应该有一定了解图21 视图层与逻辑层关系
E:\weixin\myproject
为例app.json
,写入以下代码index.wxml
,写入以下代码index.js
文件,写入以下代码AppId
和项目名称,点击“选择”按钮添加项目,项目目录选择刚才创建的目录E:\weixin\myproject
,点击“添加项目”完成添加图22 目录结构
图23 项目配置界面
app.json
,通过pages
设置找到默认首页页面mypages/index/index
(pages
第一个路径默认为首页),然后加载mypage/index
目录中index.wxml
、index.wxss
、index.js
、index.json
这4个文件进行页面渲染图2-4
myproject
运行界面
app.json
、app.js
和app.wxss
,它们分别控制小程序整体配置、逻辑和整体样式,小程序启动时只会执行一次。这3个文件必须放在项目根目录,且文件名必须是app
,其中app.json
和app.js
是必须的.wxml
、.wxss
、.js
和json
四个文件组成,它们分别控制页面的结构、样式、逻辑和配置,其中.wxml
文件和.js
文件是必须的,按照框架规定,同一个页面的这4个文件必须具有相同的路径和文件名,所以在这个项目中我们将它们放置在mypages/index
路径下且文件名统一为index
,其中index
目录名可以和页面文件名不一致,为了便于管理我们尽量将页面目录名和页面文件名保持一致app.json
、app.js
、app.wxss
构成,这3个文件必须放置在项目根目录,一个小程序只有一份,它们负责小程序整体的配置:app.json
:小程序公共设置,配置小程序全局设置app.js
:小程序逻辑文件,主要用于注册小程序全局实例,编译时会和其他页面逻辑文件打包成一份JavaScript
文件app.wxss
:小程序公共样式表,对所有页面的布局文件都有效app.json
)pages
:设置页面路径,必填项window
:设置默认页面的窗口表现tabBar
:设置tab
的表现networkTimeout
:设置网络超时时间debug
:设置是否开启debug
模式,默认关闭
app.json
文件内容整体结构如下:
pages
负责注册小程序页面,必须填写,value
值为一个包含页面路径的数组,用来指定小程序由哪些页面构成,每一项由页面“路径+文件名”组成,如下所示:pages
数组中页面路径不需要填写文件后缀名,渲染页面时框架会自动寻找路径.json
,.js
,.wxml
,.wxss
四个文件进行整合pages
配置数组第一项代表小程序的初始页面pages
进行修改,并且重启项目window
负责设置小程序状态栏、导航条、标题、窗口背景色等系统级样式tabBar
快速实现,tabBar
是个非必填项目代码清单21
app.json
图2-6
tabBar
配置示例
API
的超时时间只能通过networkTimeout
统一设置,不能在API
中单独设置示例代码如下:
debug
模式后,在开发者工具的控制面板,调试信息以info
的形式输出页面逻辑文件
和小程序逻辑文件
app.js
便是小程序逻辑文件,在这个文件中,我们可以通过App
()函数注册小程序生命周期函数、全局方法和全局属性,已注册的小程序实例可以在其他逻辑层代码中通过getApp
()获取App
()函数用于注册一个小程序,参数为一个Object
对象,在这个参数对象中我们可以注册自定义方法和属性供全局使用,就像在quickstart
项目中,我们利用App
()注册了用户登录信息onLaunch
和onShow
方法,然后通过app.json
的pages
属性注册相应的页面,最后根据默认路径加载首页;Home
按钮离开微信时,小程序并没有直接销毁,而是进入了后台,这两种情况都会触发onHide
方法;Home
按钮离开微信)或再次从微信中打开小程序时,又会从后台进入前台,这时会触发onShow
方法getApp
()获取小程序实例,例如:.wxss
文件样式会覆盖app.wxss
中相同的选择器样式window
,控制当前页面的窗口表现,window
的属性和app.json
一致window
这个键,如下所示:JavaScript
文件,所有的逻辑文件,包括app.js
,最终将会打包成一个js
文件,在小程序启动时运行,直到小程序销毁,类似于ServiceWorker
,所以逻辑层也称为AppService
Page
()函数注册页面,指定页面的初始数据、生命周期函数、事件处理函数等,参数为一个Object
对象代码清单22 页面逻辑文件
Object
参数中很多属性都是生命周期函数,这些函数的调用和页面生命息息相关,程序视图层线程和逻辑层线程关系如图28所示图28
Page
实例的生命周期
WXML
(WeiXinMarkupLanguage
)是框架设计的一套标记语言,用于渲染界面,WXML
的渲染原理和ReactNative
思路一致,通过一套标记语言,在不同平台被解析为不同端的渲染文件图29 界面渲染示意图
Mustache
语法(双大括号)将变量包起来,在模板中直接作为字符串输出使用,可作用于内容、组件属性、控制属性、关键字等输出,其中关键字输出是指将JavaScript
中的关键字按其真值输出示例代码如下:
boolean
类型时,不要直接写checked="false"
,这样checked
的值是一个false
的字符串,转成boolean
类型后代表为true
,这种情况一定要使用关键字输出:checked="{{false}}
JavaScript
运算规则