在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
微信小程序开发总结
基础的配置及视图层、逻辑层自己看文档
[微信小程序文档][1]
这里只说一下自己的经验总结
微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象
每一个页面路径最多五层
eg：页面A-&页面B-&页面C-&页面D-&页面E-&（页面F是跳转不出来的）
注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮
没有外链，只能用app.json里配置的路由，a标签编译时会自动过滤掉
wx:for循环渲染时，要添加wx:key，否则报警告
使用&scroll-view&做x轴滚动时，要设置height属性，否则开发工具买账，手机可不惯着你
给视图绑定数据时，只有事件绑定、wx:key、wx:for-index、wx:for-item，直接绑定，不需要{{}}，其它绑定都要在{{}}里绑定
app.json里的pages，最好是按照，层级顺序进行配置，要不然可能不会跳转
使用touchstart、touchend时，最好不要阻止冒泡，会影响子级的tap事件，touchmove最好阻止冒泡，防止影响父级scroll-view
使用input时，最好在bindinput中动态设置value，否则安卓真机会出问题
视图元素单位
设计时最好让ui做成750px，开发中，ui是多少px，你写成多少rpx就OK了，原理，自己查文档去
&navigator url="/pages/detail/detail?id=2"&&/navigator&
onLoad (opositions) {
// 看看是不是你想要的
console.log(opositions.id)
每个页面都有一个Page实例，响应就是该实例的setData方法触发的，
*直接给绑定数据赋值，数据会改变，但是视图不会渲染
let config = {
Page(config)
&view bindtap="tapHandler"&&/view&
let config = {
tapHandler () {
console.log('i am a handler')
bindtap的绑定最终会解析成方法名，所以bindtap=“tapHandler(参数)”，是会报错的，----没有找到‘tapHandler(参数)’这个方法，好在，执行事件绑定函数时，会给它传递一个参数，参数里能取到，id、data-set，可以用他们俩绑定属性，不要企图找name、class等属性，没用的，没有
组件分三个文件，wxml、js、css
wxml文件定义template模版，页面里以import方式引入，这样能控制传入模版的数据
js文件exports一个对象，页面里以require方式引入，并且合并到Page实例化的配置对象中
let tempateConfig = require('url')
let mergeConfig = require('url/wxTools.js')['mergeConfig']
let config = {
config = mergeConfig(config, templateConfig)
Page(config)
mergeConfig是自己定义的简单的对象合并函数，支持多层，多对象合并Object.assign()方法在安卓真机上运行报错，不能用
wxTools.js
function merge (con, mcon) {
for (var key in mcon) {
if (typeof mcon[key] == 'object' && con[key]) {
merge(con[key], mcon[key])
con[key] = mcon[key]
return con
function mergeConfig () {
let config = {}
for (var i = 0, len = arguments. i & i++) {
config = merge(config, arguments[i])
return config
module.exports = {
mergeConfig: mergeConfig
css文件以@import方式导入
1.锚点&navigator&的url只能是app.json里配置的路由，只支持查询字符串，不支持hash，所以不能通过链接做锚点了。还好微信提供了&scroll-view&,实现如下：
&button data-hash="hash1" bindtap="goHash"&点击定向hash1&/button&
&button data-hash="hash2" bindtap="goHash"&点击定向hash2&/button&
&scroll-view scroll-y="true" scroll-into-view="{{toView}}"&
&view id="hash1"&&/view&
&view id="hash2"&&/view&
&/scroll-view&
toView: 'hash1'
goHash (e) {
let hash = e.currentTarget.dataset.hash
this.setData({
toView: hash
但是这是单向的，只能点击按钮，跳转锚点，屏幕滑动到相应锚点，toView属性不会相应改变，当然，如果你能通过bindscroll事件动态取到的相关数据，并且最终能把toView计算出来，就另说了，但不要想操作dom获取元素宽高什么的，对不起，微信的dom卖完了，没有
2.滚动加载微信没有document、window对象，所以没有onscroll给你用，那怎么办呢？还好微信提供了&scroll-view&,实现如下：
&scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”&
&view wx:for="{{movies}}" wx:key="index"&
{{item.name}}
&/scroll-view&
movies: []
getMovies () {
let _self = this
wx.request({
url: 'https://......',
success: function(res) {
// res.data才是你后端返回的真实数据
_self.setData({
movies: res.data
loadMovies () {
// 得到要更新的数据，setData重置movies
可以做懒加载，也可以做预加载，具体逻辑自己想吧
暂时就这些啦。。。最后抱怨一句，咋就不支持外链呢，引共用组件咋那么麻烦呢
0 收藏&&|&&11
你可能感兴趣的文章
77 收藏，3.3k
18 收藏，3.1k
46 收藏，3.9k
感谢楼主的分享，请问是否可以转载？微信小程序联盟网站，专门收集微信小程序的好文章，会注明作者及原文链接
感谢楼主的分享，请问是否可以转载？微信小程序联盟网站，专门收集微信小程序的好文章，会注明作者及原文链接
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。想开发微信小程序主要需要自学什么技术？
1.前端三剑客：HTML/CSS/JS，必须掌握且熟练学习资料：建议撸一遍w3cschool里面的基础语法，再去慕课网看看相关的基础视频达标要求：可以实现网站常见的页面效果及交互（轮播，tab等等）2.模块化开发/组件化开发学习资料：框架除了学习基础的语法和API外就是学习思想，AngularJs建议慕课网的视频撸一遍，但是如果无基础的小白难度会较大，可以尝试先学习vue，入手快达标要求：熟悉SPA的基础搭建和编写，掌握路由，数据模型和服务等相关操作
你还没有登录，请先登录或注册慕课网帐号
建议将需求明确一下，比如是开发什么类型的小程序，商城、资讯还是什么，或者给个参考产品，这样才能得到准确的报价。价格的话，专业的开发团队肯定会比不专业的高一些，当然服务也会更好。推荐找专业的优质开发服务商，如快搞定等。
你还没有登录，请先登录或注册慕课网帐号
我已经做了写DEMO了 总结一下小程序是啥吧1、语法用的事HTML
和JS的语法
但是本质上不是 这个2、思路上 是MVVM的结构
如果之前接触过angularJS
requireJS 用起来得心应手3、基础上
JS的语法是必须的4、最后 从目前开放出来的API
我不看好小程序
也许正式版有改版
建议你这个不要当一份正式的工作来做，短期内不会形成一个新的职业的
你还没有登录，请先登录或注册慕课网帐号
我已经做了写DEMO了 总结一下小程序是啥吧1、语法用的事HTML
和JS的语法
但是本质上不是 这个2、思路上 是MVVM的结构
如果之前接触过angularJS
requireJS 用起来得心应手3、基础上
JS的语法是必须的4、最后 从目前开放出来的API
我不看好小程序
也许正式版有改版
建议你这个不要当一份正式的工作来做，短期内不会形成一个新的职业的
你还没有登录，请先登录或注册慕课网帐号
25300人关注
56883人关注
12435人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-2注册 | 登录
百度产品运营师，微信号baiqinote
专为互联网人打造的365天成长计划，500门视频课程随便看，构建你的产品、运营知识体系。
等到iPhone8发布的时候，买个16G大小的应该就足够用了，因为有了应用号之后只需装微信就够了嘛。
距离张小龙的那场首次公开演讲已经有九个月了，而在那场演讲中备受关注的「应用号」在千呼万唤中终于以「小程序」的名字正式对外小范围公测，不少创业者表示机会来了跃跃欲试。诚然，微信每次放出的大招，不管是公众号、服务号、朋友圈广告等，对于抢先抓住机会的人都是不小的红利。而这次这个大招，或许足以影响现有移动互联网的格局。
张小龙在朋友圈里这样解释道：小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
对于希望从「小程序」中获取红利的创业者，不妨好好读完这篇文章。做不做？比怎么做更重要！
一、「小程序」和「公众号菜单栏内嵌H5」有什么区别？
看上图展示的小程序截图，像不像一个Native APP加了一个顶部微信菜单的帽子？
Native APP和Web APP谁是未来的主流这个命题争了很多年，而Native APP最大的优势也就是对于系统控件接口和框架的调用能力比Web APP不知道高到哪里去。虽然京东同时提供了手机APP和手机H5形式的页面供用户浏览和下单，但是同时用过二者的都能体会到，H5页面在流畅度上还是差一些。
在此之前，很多创业者以公众号菜单栏内嵌H5的形式，完成了基础功能的微信化植入，但通常都是比较简单的页面，操作体验比较一般。
这次微信推出的小程序，最大的亮点在于微信提供了丰富的框架组件和API接口供开发者调用，具体包含：界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。在这些组件和接口的帮助下，建立在微信上的小程序在运行能力和流畅度上面便可以保持和Native APP一样的体验。
二、当我们谈创业的时候，我们到底在做什么？
过去两年在资本的推动和互联网+概念的热炒之下，出现了罕见的创业热潮，各种各样的创业项目出现，应用市场内APP的数量也井喷式增长。
行业里有一个很大的误区：
互联网创业=做个网站
移动互联网创业=做个APP
很显著的现象就是很多传统企业在还没搞清什么是互联网+的时候，就迫不及待地做APP了，做出来了有没有人用，当然那是另外一回事。
回到创业这件事上，还是得回归商业的本质，商业是提供顾客所需要的物品和服务的一种行为。所以不管是网站，还是APP，或者很多创业者已经在尝试的微信公众号，甚至是QQ群、微信群，这都是连接用户的一种载体。传统商业依赖于线下实体门店为顾客提供服务，互联网的存在将获取新客户和提供服务的场景进行了线上化改造，从而提升了商业效率。
最近有一家花店在我的同事间很受欢迎，它会给顾客每周固定时间会送来一束搭配好的花。这是一个没有实体店的花店，也没有APP，唯一的载体就是微信公众号，下单支付是在微信号内，信息填写修改是在微信号内，客服也是在微信号内，好像除此之外也没有更多其他需要的功能了。所以这样一个创业项目，微信号就足以满足其大部分的需求，虽然在某些环节上可能有些体验粗糙，但相比之下单独做个APP？哪边成本更高呢。
三、为什么微信小程序的诞生对创业者是好机会
1.APP流量成本的急剧攀升
做渠道运营的同学可能会清楚，过去两年里，APP推广的成本是呈翻倍增长的。有些垂类APP的CPA单价高达500元以上，对于创业者来说没有太多钱可以去砸在流量上，但流量往往是控制产品生死的命脉，每年有50%的新APP死在流量问题上。
2.移动互联网格局基本已定，用户主要需求场景已被巨头把持
移动互联网发展已有五年时间，在这几年时间里，从PC时代迁移过来的连接人与信息、连接人与人、连接人与商品、连接人与服务四个大类已经基本完成了格局重塑。用户的主要需求场景，尤其是同时具备刚需和高频两个特点的场景，基础工具、生活服务、娱乐等都已经有PC时代的老巨头继续把持，或者移动互联网新生的小巨头们占据山头。
3.面向所有产品对用户时间的竞争
在之前的文章里，白崎反复讲过一个观点就是现在的竞争不仅仅是同类竞品的竞争，其实是你在和所有产品竞争用户的时间。显然微信是目前的翘楚，平均每天长达4小时以上的停留时长。很多APP面临的问题便是用户即便下载安装了，但也想不起打开，或者打开了很快就被关闭。
在以上三个背景的情况下，对创业者而言环境真的很糟糕，用户获取难、使用率不高是普遍的痛点。在年初的「应用号」概念发布时，便赢得很多创业者的期待，原因就在于大家希望从微信这棵大树上获取一些红利。
四、移动互联网第二春：SuperAPP+LightAPP模式
轻应用是一种趋势，早在2013年左右，百度和UC分别对「轻应用」的模式进行了尝试，虽然都失败了，但不可否认这条路的正确性，只是在当时这两家都不具备发展起生态的能力。
百度的轻应用是以搜索为核心的生态，UC的轻应用是以浏览器为核心的生态，二者都是Web APP的插件化思路。百度轻应用接入了如「顺丰快递」为代表案例的信息查询服务入口，UC轻应用则接入了「迅雷」「快播」为代表案例的和浏览器场景强结合的信息查询、信息下载的入口。
复盘为什么百度和UC都没做起来，一个重要的前提是当时的百度和UC都不具备SuperAPP的根基，尤其是不够高频，所以带不起来这个生态。
但2016年的微信来做这件事，天时地利人和似乎都占据了，既有海量的用户，强大的用户粘性，足够长的用户使用时长，是国内目前最称得上SuperAPP的应用了。
白崎预估，这种SuperAPP+LightAPP的模式或许能够带起移动互联网的第二春，很多长尾的需求之前由于落地条件不成熟不能做的，现在可以重新回来尝试一下。即使是很小的一个需求点，以LightAPP的形式附着在微信上，现在也具备了一定的生存空间。
五、谁适合抓住这波红利
在别人家平台玩，首先得研究平台欢迎什么样的人。从微信官方对外公布的信息来看，最鼓励的是服务提供者，因为这和微信「连接人与服务」的战略诉求最为契合。
白崎的建议是：低频、非刚需场景的长尾服务提供者最适合来做微信小程序。
高频场景的服务依然适合以独立APP作为阵地，即便微信在发现Tab内给京东开辟了最明显的「购物」二级入口，依然是用手机京东APP的人多，即使在体验上大大增强的微信小程序推出后，结论依然会是如此。
高频场景的服务天然具备独立发展成生态的潜力，可以自成一套生态体系，比如服务领域的滴滴出行。即使是在微信、支付宝、微博中都开辟了打车入口，这些也只是增量，自家APP还是主要的阵地。
而对于低频、非刚需场景的长尾服务而言，由于需求通常较为简单，使用频次低，撑不起来一个独立APP，寄生在巨头身上是最好的选择。
正如把支付宝中的「转账」、「付款」、「信用卡还款」、「生活缴费」等拆成一个个独立APP，用户肯定不会买账，但把所有跟钱相关的需求都汇聚在一起，哪怕是非常长尾的水电燃气物业费和ETC交费通通都涵盖，这才成就了今天的国民应用支付宝。
现在，微信正在试图开放接受长尾的需求场景，把自己打造成一个无所不包的生态系统。这个系统，包含人与人的连接，包含人与信息的连接，包含人与商品的连接，更包含各类大大小小的服务连接。
比如上面提到过的花店的案例，符合低频场景、长尾服务的特点，他们家就非常适合做微信小程序，而且只要在现有基础上把微信内嵌H5迁移成小程序，就能改善下单流程、客服等方面的体验优化，从而更好地维系用户。
六、决定开发微信小程序之前，这三个担忧不容忽视
听到「小程序」发布的消息后，相信很多人都跃跃欲试，觉得得抓住机会。其实风险与收益共存，下面这三个担忧在决定做之前，得想清楚。
1.如何区分现有独立APP和微信小程序的定位
对于还没有开始做APP的创业者，小程序的发布恰似一阵甘霖，来得正是时候。但对于已经开发了独立APP的创业者呢？开发一个一模一样的微信小程序出来，是否会出现零和博弈造成原有独立APP的荒废？
白崎的建议是，维持原有独立APP的持续迭代更新，把微信小程序作为新的增量部分，在用户数据上做到两边的一致性。把选择权交还给用户，用户总是会选择更适合自己的那一边。是否弃掉独立APP，得用数据来说话。
还有一种方式，可以将微信小程序作为一个lite版，进行产品功能的MVP试验。
至于以哪边作为主要用户阵地，还得结合用户获取成本来看。在同时满足业务需要的情况下，如果花最少的成本，能获取更多的用户，有什么理由说不呢？
2.假如微信封了你的小程序，怎么办？
微信在过去几年里有一个很大的特点就是生态封闭，这和苹果有些相似。很多创业者借助社交红利尝到甜头，也有因违反规定被微信做封号处理，一夜之间回到解放前。
以下案例想必还历历在目：
诱导关注、诱导分享：封号
淘宝链接：屏蔽
虾米音乐分享链接：屏蔽
在朋友圈里传播外链达到一定次数：屏蔽，严重封链接
在微信生态里玩，永远要忌惮红线在哪儿，毕竟微信具备随时掐断脖子的能力，只是它愿不愿意动手的问题。所以做之前熟悉规则很重要，当然也有时候只是简单的立场站队问题。
3.同样存在用户获取成本变高的问题
现在获取用户难是因为手机里的APP太多，应用分发的入口变得集中从而用户获取成本价格昂贵，流量问题从移动互联网诞生至今都是创业者最大的困扰之一。
等红利期过后，微信小程序是否也会出现这个问题呢？
①如何获取用户关注
虽然微信小程序不需要下载安装，但是在成千上万的小程序中，用户从哪儿知道你，找到你呢。对此张小龙的朋友圈里提到了「扫一扫」和「搜一下」这两种方式。
不管是关注还是扫一扫，首先得让小程序能够触及到用户，才有被用户使用的可能，正如APP首先得被下载安装才能使用。
搜索，是一个基于品牌的行为。搜索精准的产品关键词，首先得让用户知道你的品牌才有可能搜索到，这对初创品牌是硬伤。搜索行业关键词或泛需求类的关键词，如何在最明显的位置出现在用户面前且引导用户点击前往，OMG，难道也要竞价吗？
这些都是可以预见到的用户获取成本问题。
②如何在臃肿的微信中获得存在感，实现用户留存和用户维系
不得不说微信现在已经开始臃肿了，刚看了下手机，微信占据了9.8G的内存容量（前不久才刚清理过一次），过去24%小时微信耗去43%的手机电量，另外据微信官方公布数据，用户平均在微信的停留时间为4小时。这背后是好友对话聊天、群消息、订阅号、服务号、朋友圈等一系列微信自有功能所带来的信息堆积。
等全面开放公测之后，随着开发者的增多，微信自有功能、第三方小程序功能混合在一个容器里，获得存在感可不是一件简单的事情。如何在微信里做好用户留存和用户维系，也是一个难点。
新机会出现时，选择做不做比怎么做更重要。
#专栏作家#
白崎，微信公众号：baiqinote，人人都是产品经理专栏作家，百度产品运营师。负责过多款DAU千万级产品的运营工作，擅长用户运营、社区运营等模块。喜欢研究各类新鲜的APP，微信分享产品运营的实战干货文章，偶尔扯扯淡。
本文为人人都是产品经理社区独家约稿，未经本站许可，禁止转载，谢谢合作。
如果觉得有用，欢迎打赏！
赞赏4人打赏
收藏已收藏 | 119赞已赞 | 65
百度产品运营师，微信号baiqinote
产品经理群运营交流群营销交流群
文案交流群
Axure交流群
PM要学点技术
关注微信公众号
11个回答16人关注
6个回答4人关注
6个回答8人关注
39个回答37人关注
11个回答23人关注
16个回答20人关注首个微信小程序开发教程，通宵吐血写的！ - 文章 - 伯乐在线
& 首个微信小程序开发教程，通宵吐血写的！
微信应用号（小程序，「应用号」的新称呼）终于来了！
目前还处于内测阶段，微信只邀请了部分企业参与封测。想必大家都关心「小程序」的最终形态到底是什么样子？怎样将一个「服务号」改造成为「小程序」？
我们暂时以一款简单的第三方工具的实例，来演示一下开发过程吧——
开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南）
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
1. 获取微信小程序的 AppID
首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号，登录 https://mp.weixin.qq.com ，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。
注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份 – 开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。
2. 创建项目
我们需要通过开发者工具，来完成小程序创建和代码编辑。
开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 demo。
项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在「编辑」里可以查看和编辑我们的代码，在「调试」里可以测试代码并模拟小程序在微信客户端效果，在「项目」里可以发送到手机里预览实际效果。
3. 编写代码
点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
getUserInfo:function(cb){
var that =
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userI
typeof cb == "function" && cb(that.globalData.userInfo)
globalData:{
userInfo:null
123456789101112131415161718192021222324252627282930
//app.jsApp({&&onLaunch: function () {&&&&//调用API从本地缓存中获取数据&&&&var logs = wx.getStorageSync('logs') || []&&&&logs.unshift(Date.now())&&&&wx.setStorageSync('logs', logs)&&},&&getUserInfo:function(cb){&&&&var that = this;&&&&if(this.globalData.userInfo){&&&&&&typeof cb == "function" && cb(this.globalData.userInfo)&&&&}else{&&&&&&//调用登录接口&&&&&&wx.login({&&&&&&&&success: function () {&&&&&&&&&&wx.getUserInfo({&&&&&&&&&&&&success: function (res) {&&&&&&&&&&&&&&that.globalData.userInfo = res.userInfo;&&&&&&&&&&&&&&typeof cb == "function" && cb(that.globalData.userInfo)&&&&&&&&&&&&}&&&&&&&&&&})&&&&&&&&}&&&&&&});&&&&}&&},&&globalData:{&&&&userInfo:null&&}})
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口
背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
"pages/index/index",
"pages/logs/logs"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
123456789101112
{&&"pages":[&&&&"pages/index/index",&&&&"pages/logs/logs"&&],&&"window":{&&&&"backgroundTextStyle":"light",&&&&"navigationBarBackgroundColor": "#fff",&&&&"navigationBarTitleText": "WeChat",&&&&"navigationBarTextStyle":"black"&&}}
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
/**app.wxss**/
.container {
height: 100%;
flex-direction:
align-items:
justify-content: space-
padding: 200rpx 0;
box-sizing: border-
12345678910
/**app.wxss**/.container {&&height: 100%;&&display: flex;&&flex-direction: column;&&align-items: center;&&justify-content: space-between;&&padding: 200rpx 0;&&box-sizing: border-box;}
3. 创建页面
在这个教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径 + 页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的文件是页面结构文件。
index.wxml 是页面的结构文件：
&!--index.wxml--&
&view class="container"&
bindtap="bindViewTap" class="userinfo"&
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&view class="usermotto"&
&text class="user-motto"&{{motto}}&/text&
12345678910
&!--index.wxml--&&view class="container"&&&&view&&bindtap="bindViewTap" class="userinfo"&&&&&&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&&&&&&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&&&&/view&&&&view class="usermotto"&&&&&&text class="user-motto"&{{motto}}&/text&&&&/view&&/view&
本例中使用了、、来搭建页面结构，绑定数据和交互处理函数。
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
//index.js
//获取应用实例
var app = getApp()
motto: 'Hello World',
userInfo: {}
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
1234567891011121314151617181920212223242526
//index.js//获取应用实例var app = getApp()Page({&&data: {&&&&motto: 'Hello World',&&&&userInfo: {}&&},&&//事件处理函数&&bindViewTap: function() {&&&&wx.navigateTo({&&&&&&url: '../logs/logs'&&&&})&&},&&onLoad: function () {&&&&console.log('onLoad')&&&&var that = this&&&&//调用应用实例的方法获取全局数据&&&&app.getUserInfo(function(userInfo){&&&&&&//更新数据&&&&&&that.setData({&&&&&&&&userInfo:userInfo&&&&&&})&&&&})&&}})
index.wxss 是页面的样式表：
/**index.wxss**/
.userinfo {
flex-direction:
align-items:
.userinfo-avatar {
width: 128
height: 128
margin: 20
border-radius: 50%;
.userinfo-nickname {
.usermotto {
margin-top: 200
123456789101112131415161718192021
/**index.wxss**/.userinfo {&&display: flex;&&flex-direction: column;&&align-items: center;}&.userinfo-avatar {&&width: 128rpx;&&height: 128rpx;&&margin: 20rpx;&&border-radius: 50%;}&.userinfo-nickname {&&color: #}&.usermotto {&&margin-top: 200px;}
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件：
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
logs 的页面结构
&!--logs.wxml--&
&view class="container log-list"&
&block wx:for-items="{{logs}}" wx:for-item="log"&
&text class="log-item"&{{index + 1}}. {{log}}&/text&
&!--logs.wxml--&&view class="container log-list"&&&&block wx:for-items="{{logs}}" wx:for-item="log"&&&&&&text class="log-item"&{{index + 1}}. {{log}}&/text&&&&/block&&/view&
logs 页面使用 控制标签来组织代码，在 上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点
var util = require('../../utils/util.js')
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {
return util.formatTime(new Date(log))
1234567891011121314
//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))&&&&&&})&&&&})&&}})
运行结果如下：
4. 手机预览
开发者工具左侧菜单栏选择「项目」，点击「预览」，扫码后即可在微信客户端中体验。
目前，预览和上传功能尚无法实现，需要等待微信官方的下一步更新。
如你所见，微信官方给出的开发指南还非常简单，很多细节、代码和功能都没有明确的展示，所以接下来就到博卡君展示实力的时候啦！开发教程正式开始！
第一章：准备工作
做好准备工作很重要。开发一个微信应用号，你需要提前到微信的官方网站（weixin.qq.com）下载开发者工具。
1. 下载最新微信开发者工具，打开后你会看到该界面：
2. 点击「新建 web+」项目，随后出现如下画面：
3. 该页面内的各项内容需要注意——
AppID：依照官方解释来填。
Appname: 项目最外层文件夹名称，如你将其命名为「ABC」，则之后的全部项目内容均将保存在「/ABC/…」目录下。
本地开发目录：项目存放在本地的目录。
注：再次强调，如果你和团队成员共同开发该项目，则建议你们使用同样的目录名称及本地目录，以确保协同开发的统一性。如果你之前已有项目，则导入过程与以上内容近似，不再赘述。
4. 准备工作全部完成后，点击「新建项目」按钮，弹出框点「确定」。
5. 如上图所示，此刻，微信开发者工具已经为你自动构建了一个初始的 demo 项目，该项目内包含了一个微信应用项目所需具备的基本内容和框架结构。点击项目名称（图中即「cards」）进入该项目，就能看到整个项目的基本架构了：
第二章：项目构架
微信目前用户群体非常庞大，微信推出公众号以后，火爆程度大家都看得到，也同样推动着 h5 的高速发展，随着公众号业务的需求越来越复杂，应用号现在的到来也是恰到好处。我们团队具体看了一两次文档后发现，它提供给开发者的方式也在发生全面的改变，从操作 DOM 转为操作数据，基于微信提供的一个过桥工具实现很多 h5 在公众号很难实现的功能，有点类似于 hybrid 开发，不同于 hybrid 开发的方式是：微信开放的接口更为严谨，结构必须采用他提供给我们的组件，外部的框架和插件都不能在这里使用上，让开发者完全脱离操作 DOM，开发思想转变很大。
工欲善其事，必先利其器。理解它的核心功能非常重要，先了解它的整个运作流程。
生命周期：
在index.js里面：
开发者工具上 Console 可以看到：
在首页 console 可以看出顺序是 App Launch–&App Show–&onload–&onShow–&onReady。
首先是整个 app 的启动与显示，app 的启动在 app.js 里面可以配置，其次再进入到各个页面的加载显示等等。
可以想象到这里可以处理很多东西了，如加载框之类的都可以实现等等。
路由在项目开发中一直是个核心点，在这里其实微信对路由的介绍很少，可见微信在路由方面经过很好的封装，也提供三个跳转方法。
wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
wx.navigateBack()：关闭当前页面，回退前一页面。
这三个基本上使用足够，在路由方面微信封装的很好，开发者根本不用去配置路由，往往很多框架在路由方面配置很繁琐。
此次微信在组件提供方面也是非常全面，基本上满足项目需求，故而开发速度非常快，开发前可以认真浏览几次，开发效率会很好。
任何外部框架以及插件基本上无法使用，就算原生的 js 插件也很难使用，因为以前我们的 js 插件也基本上全部是一操作 dom 的形式存在，而微信应用号此次的架构是不允许操作任何 dom，就连以前我们习惯使用的动态设置的rem.js也是不支持的。
此次微信还提供了 WebSocket，就可以直接利用它做聊天，可以开发的空间非常大。
跟公众号对比我们发现，开发应用号组件化，结构化，多样化。新大陆总是充满着惊喜，更多的彩蛋等着大家来发现。
接下来开始搞一些简单的代码了！
1. 找到项目文件夹，导入你的编辑器里面。在这里，我使用了 Sublime Text 编辑器。你可以根据自己的开发习惯选择自己喜欢的编辑器。
2. 接下来，你需要根据自己的项目内容调整项目结构。在范例项目中，「card_course」目录下面主要包含了「tabBar」页面以及该应用的一些配置文件。
3. 示例项目的「tabBar」是五个菜单按钮：
4. 找到「app.json」文件，用来配置这个五个菜单。在代码行中找到「”tabBar”」：
你可以根据实际项目需求更改，其中：
「Color」是底部字体颜色，「selectedColor」是切换到该页面高亮颜色，「borderStyle」是切换菜单上面的一条线的颜色，「backgroundColor」是底部菜单栏背景颜色。文字描述较为抽象，建议你一一调试并查看其效果，加深印象。
「“list”」下的代码顺序必须依次放置，不能随便更改。
「”pagePath”」之后的文件名内，「.wxml」后缀被隐藏起来了，这是微信开发代码中人性化的一点——帮你节约写代码的时间，无须频繁声明文件后缀。
「”iconPath”」为未获得显示页面的图标路径，这两个路径可以直接是网络图标。
「”selectedIconPath”」为当前显示页面高亮图标路径，可以去掉，去掉之后会默认显示为「”iconPath”」的图标。
「”Text”」为页面标题，也可以去掉，去掉之后纯显示图标，如只去掉其中一个，该位置会被占用。
注意：微信的底部菜单最多支持五栏（五个 icons），所以在你设计微信应用的 UI 和基本架构时就要预先考虑好菜单栏的排布。
5. 根据以上代码规则，我做好了示例项目的基本架构，供你参考：
6. 「Json」文件配置好后，「card_course」的基本结构入上图所示，不需要的子集都可以暂时删除，缺少的子集则需要你主动新建。删除子集时记得顺带检查一下「app.json」里的相关内容是否已经一并删除。
注意：我个人建议你新建一个「wxml」文件的同时，把对应的「js」和「wxss」文件一起新建好，因为微信应用号的配置特点就是解析到一个「wxml」文件时，会同时在同级目录下找到同文件名的「js」和「wxss」文件，所以「js」文件需及时在「app.json」里预先配置好。
编写「wxml」时，根据微信应用号提供的接口编码即可，大部分就是以前的「div」，而我们现在就用「view」即可。需要用其它子集时，可以根据微信提供的接口酌情选择。
使用「class」名来设置样式，「id」名在这里基本没有什么用处。主要操作数据，不操作「dom」。
7. 以上是示例项目首页的「wxml」编码。从图中就可以看出，实现一个页面代码量非常少。
8. 「Wxss」文件是引入的样式文件，你也可以直接在里面写样式，示例中采用的是引入方式：
9. 修改代码后刷新一次，可以看到未设背景的「view」标签直接变成了粉色。
注意：修改「wxml」和「wxss」下的内容后，直接 F5 刷新就能直接看到效果，修改「js」则需点击重启按钮才能看到效果。
10. 另外，公共样式可以在「app.wxss」里直接引用。
11. 「Js」文件需要在「app.json」文件的「”page”」里预先配置好。为了项目结构清晰化，我在示例项目中的「index」首页同级目录新建其它四个页面文件，具体如下：
经过以上步骤，案例中的五个底部菜单就全部配置完毕了。
关于作者：
可能感兴趣的话题
通宵吐血是个啥场面
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2018 伯乐在线