微信小程序php 微信小程序开发教程详解( 三 )


index.json是页面的配置文件:
页面的配置文件是非必要的 。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项 。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置 。
logs的页面结构
{{index1}}. {{log}} logs 页面使用 控制标签来组织代码,在 上使用 wx:for-items 绑定 logs 数据,并将 logs 数据循环展开节点
//logs.jsvar util = require('../../utils/util.js')Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) }})运行结果如下:

微信小程序php 微信小程序开发教程详解

文章插图
5.手机预览
开发者工具左侧菜单栏选择「项目」,点击「预览」,扫码后即可在微信客户端中体验 。
微信小程序php 微信小程序开发教程详解

文章插图
目前,预览和上传功能尚无法实现,需要等待微信官方的下一步更新 。
如你所见,微信官方给出的开发指南还非常简单,很多细节、代码和功能都没有明确的展示,所以接下来就到博卡君展示实力的时候啦!开发教程正式开始!
第一章:准备工作【微信小程序php 微信小程序开发教程详解】做好准备工作很重要 。开发一个微信应用号,你需要提前到微信的官方网站(weixin.qq.com)下载开发者工具 。
1. 下载新微信开发者工具,打开后你会看到该界面:
微信小程序php 微信小程序开发教程详解

文章插图
2. 点击「新建 web 」项目,随后出现如下画面:
微信小程序php 微信小程序开发教程详解

文章插图
3. 该页面内的各项内容需要注意——
AppID:依照官方解释来填 。
Appname: 项目最外层文件夹名称,如你将其命名为「ABC」,则之后的全部项目内容均将保存在「/ABC/…」目录下 。
本地开发目录:项目存放在本地的目录 。
注:再次强调,如果你和团队成员共同开发该项目,则建议你们使用同样的目录名称及本地目录,以确保协同开发的统一性 。如果你之前已有项目,则导入过程与以上内容近似,不再赘述 。
4. 准备工作全部完成后,点击「新建项目」按钮,弹出框点「确定」 。
微信小程序php 微信小程序开发教程详解

文章插图
5. 如上图所示,此刻,微信开发者工具已经为你自动构建了一个初始的 demo 项目,该项目内包含了一个微信应用项目所需具备的基本内容和框架结构 。点击项目名称(图中即「cards」)进入该项目,就能看到整个项目的基本架构了:
微信小程序php 微信小程序开发教程详解

文章插图
第二章:项目构架微信目前用户群体非常庞大,微信推出公众号以后,火爆程度大家都看得到,也同样推动着 Html 5 的高速发展,随着公众号业务的需求越来越复杂,应用号现在的到来也是恰到好处 。
博卡君发现,微信提供给开发者的方式也在发生全面的改变:从操作 DOM 转为操作数据,基于微信提供的一个过桥工具实现很多 Html 5 在公众号很难实现的功能,有点类似于 hybrid 开发,不同于 hybrid 开发的方式是:微信开放的接口更为严谨,结构必须采用他提供给的组件,外部的框架和插件都不能在这里使用上,让开发者完全脱离操作 DOM,开发思想转变很大 。
工欲善其事,必先利其器 。理解它的核心功能非常重要,先了解它的整个运作流程 。

推荐阅读