您所在的位置： &
微信小程序新手教程之怎么实现消息交互
编辑：xwgod
来源：下载吧
阅读1294次
　　微信小程序新手教程之怎么实现消息交互，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧　　本篇文章主要介绍公众号常用的消息交互，并配以流程图。主要目的是希望开发者们从宏观角度对开发者公众号有个清晰的认识，在后续各接口开发中有事半功倍的效果。　　题外话：在我们开发过程中，一般先有明确的目标，再形成清晰的流程逻辑，最后根据设计模式等理论落实代码细节。所以，最后无论使用哪种编程语言，都是一样的了。　　所以，高层等都是不写代码的...，如果有一天你也不写代码了，恭喜你高升了;或者还有一种可能：恭喜您，不再做码农了~　　一，微信服务器与开发者服务器交互　　显然的，如果公众号想成为开发者号，必须有自己的服务器，也就是说必须部署自己的独立应用。以Java 开发为例，需要有对应web应用，且是80端口。服务器获取的方式很多，可以租(比如阿里、腾讯：收费)，也可以使用新浪SAE(可免费，后面详细介绍)。　　前提是你要：有想法，有公众号，有码农!　　1.1，交互图　　我们以消息交互场景，讲解交互过程。就是粉丝给公众号发送了一条消息，公众号自动回复一条或多条消息。比如，你关注了公众号
程序员实战(coder10)，想撩一下它，就发送了一条文本消息：hello，于是下面的事情就会发生了....　　1动作请求：就是你给coder10发送了这时候微信平台服务器会接受到这条消息，并确定是公众号coder10的粉丝发送来的;　　2是否开发者公众号：在微信公众平台中可以开启开发者配置，如果没有配置，说明不是开发号，进入：3业务处理
;如果配置为开发者号，那么进入：4包装转换;　　3业务处理：微信平台会根据coder10的 “自动回复”(微信平台菜单)中的设置，获取对应的回复素材，然后进行：8回复处理;　　4包装转换：微信平台会重新包装粉丝请求的动作，并转换为公众号开放接口报文的形式(XML格式)，并转发给开发者服务器;　　5请求：微信平台会带着转换后的参数，发送http请求开发者服务器应用，也就是上文提到的web应用。所以web应用必须是公网的、开放的、80端口的应用。请求的URL就是公众号成为开发者号配置的时候，填写的URL、Token认证时候的URL(后面详细介绍)。　　6开发者根据自己的业务进行处理：现在就进入了码农们比较熟悉的领域了，无论你用什么技术或编程语言，只要提供对外的web应用就可以了。　　此web应用可以接受http请求，并获取参数，根据自己的业务逻辑处理后，包装转换回复数据，并返回数据给微信服务器：7回复;　　7回复：回复的数据格式依然是公众号开放接口规定的XML格式的报文。微信服务器接收到数据之后，进入：8回复处理;　　8回复处理：就是将要回复的内容转换处理，比如是菜单调用摄像头事件，还是地理位置事件，还是仅仅回复消息等等;coder10是回复消息。处理完成之后进行动作回复;　　9动作回复：这时，粉丝的微信中就会收到公众号的反馈!　　流程结束!　　下面小编就给大家介绍一种一个小程序吧　　嗨图功能　　1、专题――DIY图片的模板，点击可以生成使用，分享到朋友圈。　　2、分享墙――用户上传的自己DIY作品。　　3、立即制作――可以用自己的图来DIY。　　4、告诉我――告诉产品的改进，内容的增加。　　想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!
微信小程序问题汇总
微信小程序使用教程
微信小程序开发教程
热门关键字您的位置：
关于微信小程序(应用号)，看看这篇文章就够了
作者：i黑马
　　不是所有服务都适合接入小程序。
　　9月21日晚，微信宣布：微信“小程序”开始内测。
　　自年初1月11日张小龙在北京微信公开课上发言起，历经大半年后，万众瞩目的“微信应用号”终于现身。相比“应用号”，“小程序”这个名字更加可爱。以名字看，感觉像是突出了“将你的程序接入微信”的意思。
　　我们此前分析过微信的功能迭代节奏：一般微信重要的功能规划周期，大约会在在9-12个月的时间里，这样算起来，这次应用号从规划到上线，节奏也蛮符合。
　　我们先看下面这张据传是张小龙发在朋友圈关于小程序的评论：
　　关于这张图片，前半段我理解为小程序是微信内的云端应用，不是原生App，对用户来说很轻(对开发者来说也会更轻)。
　　后半句则应该理解为：用户用完就退出程序，离开别人的服务，但继续在自己的微信里玩朋友圈，看文章。
　　昨晚微信小程序上线后，很多朋友跑来问我对这个事情的看法，我就借这篇文章一并回答了。先说几个结论：
　　1.不是所有的服务都适合接入小程序，但大部分创业者的服务都适合接入其中。后面我们会重点分析。
　　2.小程序是基于H5开发的程序，但用了类似于JS-SDK的框架(百度以前是clouda框架)，提供了更多的接口和组件，让程序更加流畅，体验接近原生APP(Native App)。
　　3.能够云端发布程序(当然也需要微信审核)，同时也能缓存数据，实现了借助微信这个最大的Native App来让H5 App更强大的目的。
　　4.目前没有受到邀请也不要怕，按照微信操盘节奏，一定是灰度推进的。这个灰度包括对用户的逐步释放，也包括多开发者的分层授权和管理等，但不代表先发就一定有优势，后面竞争的还是产品本身，而不是时间的早晚。
　　5.大家都期望通过基于微信可以获得营销、获客和传播能力，那微信小程序释放的能量是否能满足大家的需求呢?我觉得比较悬，在产品营销和微信的克制之间，主动权还是在微信手上。
　　6.H5和JS人才将会很抢手，大家可以储备一些了。
　　微信发展到小程序这个阶段应该说是有其背后的野心的。只是微信的野心一直都装在产品的盒子里，保护得很好。
　　聊到野心，我们要先看看微信的发展历程。
　　从IM到浏览器到OS的改变
　　我曾经将微信的发展阶段分为三个阶段：IM阶段、浏览器阶段和OS阶段。IM阶段的大招是语音通信和摇一摇，浏览器阶段的大招是订阅号，OS阶段的大招可能就是小程序。
　　应该说，借助语音通信、摇一摇和朋友圈，微信迅速地建立了自己的IM优势，加上腾讯本身具有的关系链这个核心资产，微信快速获得过亿的用户。
　　而浏览器其实是OS的一种(参阅google的Chrome OS)，主要的能力是解析Html(当然包括H5)，在这个基础上，订阅号是最大的受益者，也是最强的引领者。
　　OS的核心是搭建一个平台，在上面跑服务(调用本地的server和传送云端的service)，小程序这次就是借助微信这个超级Native app，将本地应用的优势，通过微信赋能给第三方服务提供者。这是有显而易见的好处的，这个好处后面会分享。
　　此外，我认为，微信应用号会是连接人和服务的尝试，它将可能在后续完全替代掉“服务号”。
　　从互联网整体的发展和腾讯公司的整体战略来看，过去的十年，互联网解决了人与信息、商品和人的链接，未来的十年一定是链接人与服务。
　　而服务更多的是垂直的、细分的、非标准的，腾讯自己做显然是很难做到的，虽然腾讯也投资了大量的服务公司，但毕竟还有很多新兴服务和潜在的服务无法概括进来，如果有一个产品能够让所有的服务都接入进来，在这个产品上能够将服务与人直接连接，那显然是价值巨大的。
　　小程序则有可能会担负这个任务。一头是7亿用户，一头是服务提供者，通过微信平台，将海量用户与海量服务进行对接，完美!所以名字虽然是小程序，看起来很Q，但野心绝对是大的很啊!
　　以上简单说了一下小程序的背景，接下来，我们会详细地和大家分析几个事情：
　　· 哪些服务和企业最适合接入应用号
　　· 如果开发者接入应用号，产品的架构和逻辑是怎么样的?
　　· 开发者注意：基于微信小程序开发，也得拼爹
　　· 未来的小程序还留给我们哪些重要的期待
　　我们依次来看。
　　1.哪些服务和企业最适合接入应用号?
　　应该说，不是所有的服务都适用小程序，但大部分的服务和几乎所有的初创业务都是可以接入小程序的。
　　哪些服务是可以接入，哪些又是不可以接入的呢?我先看一个模型。按照重要/不重要，高频/低频，我们将互联网产品分别放入四个象限。
　　然后，我们分别看这4个象限的拥抱策略，应该说，如果你的服务是很高频的，而且对于交互和界面体验的要求很高的话，还是要用原生(Native)来做。但如果你是低频/中频且重要的服务的话，你应该毫不犹豫地加入微信小程序的申请队伍。
　　象限1：大玩家、高频应用不应该接入和拥抱小程序。
　　这个象限基本上都是大玩家，比如，3BA(360、百度、阿里巴巴)。
　　· 阿里和百度显然不会接入。
　　· 高频且重要的应用不会接入。因为用户经常打开，而且交互频次很高，对应用的体验要求很高，比如直播、游戏、视频等。
　　· 对数据安全度比较高的不应该接入。虽然微信只是读取了接口，不会直接让服务者提交数据，但因为小程序一定会提供缓存功能，开发者的服务虽然基于H5，但你是跑在微信这个原型框架内的。
　　象限2：应该毫不犹豫拥抱小程序。
　　这个象限包含了大量的服务类产品。
　　教育、医疗、家政、求职招聘、二手买卖、旅游、票务、金融理财、汽车后市场，当然理论上还有12306!
　　总之，但凡用户一年用个一两次之后就再也想不起来的，是不应该用一个原生引用的方式让用户下载，而应该是通过微信小程序来解决。
　　初创型企业也应该通过小程序来试探MVP产品，因为微信拥有天然的传播能力和获客能力，而原生应用除了开发比较复杂外，推广成本极高，获客成本极高，这些都阻碍了MVP的产品探索。
　　从这个角度来说，小程序能让中国初创的互联网公司减少试错成本，提升成功概率。
　　象限3：应该慎重接入，利用微信的开放能力，引入用户到自有产品中。
　　MVP后，尽快引导到自由产品，因为自有产品能提供更好的服务，并且能留下用户，比如知乎、网易云音乐。
　　内容型的产品，通过微信获得新用户，然后转移到自有平台，也是一个很好的策略。
　　象限4：视乎情况接入，主要看开发能力。
　　基本上很多都是个人兴趣产品、工具产品，可以从MVP的角度来做，或者以兴趣的角度来做，不考虑太多的商业产出，只考虑情怀，但这些开发者有个明显的问题，就是产品设计能力和开发能力有限，所以，如果你的人是做APP的，那就还是APP吧，如果是H5的，那就微信小程序呗。
　　2.如果开发者接入应用号，产品的架构和逻辑是怎么样的?
　　如果你打算接入小程序了，你可以试着了解下这套玩法的基本架构和逻辑关系。用户会频繁和微信交互，微信也会频繁与OS交互，当然微信也通过API的方式来获取第三方的数据，并且通过服务组件、开发工具和交互框架来定义小程序的交互样式、展现方式和扩展功能。
　　有两个方向，小程序会极大降低开发的难度。
　　· 组件与前端控件：根据目前透露的情况来看，微信小程序提供了基础组件、前段原生控件和API，目的是让一个云端的H5产品具有原生应用的组件和扩展能力。这些组件，之前是由第三方来提供的框架，这次小程序，把更多的权限也开放出来了，来帮助开发者快速接入小程序，尽量标准化和结构化去处理数据。
　　· 交互框架：早在上半年，微信就已经开始公布了一套UI和交互框架，用来统一UI规范和交互示例。这些UI规范和交互示例早早就准备好，我们有理由相信，你就是一个初级程序员，没有UI、没有前端，只会写后台PHP，也可以通过接入API的方式完成自己的小程序。
　　3.开发者注意：基于微信小程序开发，也得拼爹
　　事实上，让大家激动不已的绝对不是上面的小程序的框架、逻辑、组件这些事，因为这样的事情国外的Facebook、国内的百度都有做过。大家最期待的，是微信的关系链，而关系链本身，则是微信的命根子，这次的小程序，关系链会开放吗?我觉得是呵呵。拼爹吧。
　　首先，关系链并非不可以开放，是有条件的开放。
　　上图可以看到，这基本上算是三个开放的逻辑了。
　　· 只开放公开信息：昵称、头像，其实也就是登陆ID，所有的开发者都可以接入，比如航旅纵横。
　　· 有条件开放：开放共同使用的好友。比如大众点评。所以基于大众点评，你可以看到有好友去哪。比如美团外卖，可以看到好友头条，比如58同城旗下的转转，能看到好友在卖，但很抱歉，这个关系链的开放，目前只有腾讯投资的公司，才能享受如此特权。
　　· 更大程度的开放：除了登陆和好友关系，还开放了朋友圈权限，能把一些操作直接输送到朋友圈做动作，这个很抱歉，只有腾讯自由的产品才有，比如，QQ音乐、腾讯视频等。
　　大概的逻辑是：
　　· 亲儿子，能得到全部关系;
　　· 干儿子，能得到重合的关系，你用，我也用，相互能看到，我用你不用，我不能跟你发生联系。
　　· 外人，只能刷个脸，其他的免谈。
　　所以，大家先别激动的太早，小程序目前的开放程度还是很低的，离Facebook的全能力开放还是有差距的。
　　4.总结，未来的小程序还留给我们哪些重要的期待
　　小程序是微信的一小步，但可能是移动互联网的一大步。而微信的这套玩法，特别适合于中国市场，我们也希望这套玩法能推向全球，成为标杆产品。
　　通过阶段性的释放微信的能力，将大量的开发者和服务圈入微信生态系统，让用户真正的离不开微信，完成微信建立一座在线城市的愿望。
　　在目前看到的第一阶段，我认为微信还是会先让小程序的流程走通、邀请一些开发者来做高配和的产品打磨，毕竟现在的小程序还是MVP产品。中期来看，小程序将能够让微信实现从内容到服务的生态闭环，既能增加微信周边功能的能力(如支付、地图、广告)，也能巩固微信的唯一的移动入口地位。
　　最后的最后，如果小程序的入口是这么深的话：
　　大家还是先观察一下效果，再来决定是否要拥抱吧。
(转载请保留)
您刚刚看过
互联网的一些事，已超50万小伙伴关注！31889人阅读
微信小程序（17）
实现知乎客户端的一个重要知识前提就是，要知道怎么通过知乎新闻的接口，来把数据展示到微信小程序端上。
那么我们这一就先学习一下，如何将接口获取到的数据展示到微信小程序上。
1.用到的知识点
&1& wx.request
请求接口资源（微信小程序api中的发起请求部分）
&2&swiper 实现轮播图的组件
&3&wx:for 循环语句
&4&微信小程序的基础知识
2.实现原理
首先，先看一下这个请求函数
wx.request({
url: '******',
'Content-Type': 'application/json'
success: function(res) {
console.log(res.data)
&1&首先上一段知乎接口数据的json格式中的开头
"date":"",
"stories":[
"images":[
"http://pic2.zhimg.com/aa7b0ca6c9cbc41b4a5326d.jpg"
"id":8975316,
"ga_prefix":"111422",
"title":"小事 · 我和你们一样"
"images":[
"http://pic1.zhimg.com/7c908afd88287dbc6a2c98.jpg"
"id":8977438,
"ga_prefix":"111421",
"title":"成长嘛，谁说就意味着一定要长大了？"
&2&index.js中
duration: 2000,
indicatorDots: true,
autoplay: true,
interval: 3000,
loading: false,
plain: false
onLoad: function () {
var that = this
wx.request({
url: 'http://news-at.zhihu.com/api/4/news/latest',
headers: {
'Content-Type': 'application/json'
success: function (res) {
that.setData({
zhihu: res.data.stories,
&3& index.wxml中
indicator-dots="{{indicatorDots}}
autoplay="{{autoplay}} class="banners" interval="{{interval}} duration="{{duration}}&//这里边的属性不重要，看下边
wx:for="{{zhihu}}&
class="banner" &
src="{{item.image}}
data-id="{{item.b}} bindtap="bindViewTap" class="banner-image" width="100%" height="100%"/&
class="banner-title"&{{item.title}}&
看完这个代码，你会想，根据微信小程序的绑定原理，这里边的代码哪里调用了onLoad（）这个函数，不用多想，微信小程序给你省略了这些步骤。直接调用zhihu这个数组就行。如何开发微信小程序？ - 知乎281被浏览<strong class="NumberBoard-itemValue" title="4分享邀请回答62 条评论分享收藏感谢收起mp.weixin.qq.com/debug/wxadoc/dev/index.html我作为一个产品，还是结论下小程序的价值。这对你可能帮助更大些。1）小程序好的一面* 微信可能给予入口，带来新的流量机遇（目前看应该是在发现里）* 在微信中调用更多的硬件接口，可以做出更多有趣的功能* 可以和公众号互相呼应，提供更加完整的服务体验* 体验更佳，使用更流畅（真的很流畅）2）小程序坏的一面* 一个升级版的网页开发包，和JS-SDK没有本质区别* 与添加小程序的粉丝之间关系弱，不具备公众号里粉丝关注的强关系，你可能没办法随时给使用你小程序的粉丝发消息* 限制发送给好友/群，不能分享到朋友圈，不能添加任何外链（这个是噩梦）* 微信官方的审核机制，这会让很多好的营销点子和小程序模板失去作用（重名、已审核的都会被拒绝，这个早起占坑很重要，审核机制说明戳：）* 流量获取还是需要自己解决，竞争过于激烈。公众号没做好的话，小程序也做不好* 对于技术的要求提高，品牌没有做好准备以下内容涉及小程序的知识普及，可以选择性阅读。正确理解微信小程序自从张小龙 2016 年初提出做「应用号」，外界对应用号的猜测和期待从来没有停止过。大多数人和媒体认为，小程序将会为营销带来新机会。但是真的是这样么？我们来看看10点真相。 1、小程序是微信接下来的重点产品甚至是最高优先级的产品之一，因为这是微信要成为真正的 OS 的路径。这意味着，开发者可以完全放心把精力和资源放到小程序上。 2、无关注，无阅读压力和服务号、订阅号不一样，小程序是没有关注功能的。这意味着，对用户来说，心理成本更小，用户通过搜索进入小程序，马上就可以使用，不像服务号还需要先关注。但对开发者来说，这显然不是好事。这意味着：你无法群发消息，因为你根本没有关注者你可能需要自行建立用户系统，但转化率是个问题所以，小程序在一定程度上，提高了产品运营能力的要求。 3、不是H5，也不是混合模式我们经常在朋友圈看到的非常炫酷还带背景音乐的 H5 页面，将不会在小程序里出现。微信小程序开发使用改自 Javascript, CSS, XML 的语言，同时提供了各种自有的组件和 API，这让小程序变得独立：它不兼容 HTML，网页代码在小程序里无法使用开发之前，开发者需要熟悉小程序开发语言，按照微信的命名方法，说不定会被称为 WeLang。不兼容 HTML，不仅意味着你不能在页面里使用 HTML 标记，也意味着你不能嵌入 HTML 网页：要么不嵌入，要么用 WeLang 重写。 4、不能外链不兼容 HTML 还意味着，你无法在小程序里放置外链。HTML 里的 &a& 标记是被禁止的。这很大程度上限制了营销，服务号里，我们好歹还能在文章里插入链接，而目前版本的小程序，是不能插入外链的，哪怕是放置二维码，直接在页面上长按，也没有「识别二维码」选项（噩梦啊~~~）。 5、无法分享到朋友圈，限制发送给好友/群当前版本的小程序是不支持分享到朋友圈的，在有限的条件下可以将小程序的某些页面分享给通信录的个人或群，但无法分享到朋友圈，这意味着你不会在朋友圈看到小程序刷屏，刷屏的，还是原来那些东西。从经验上来看，微信会尽一切努力维护朋友圈秩序。以后小程序能不能分享到朋友圈我不知道，但至少一开始不打开这个口对微信来说是好事，一旦打开，就很难收回来了。 6、微信自创了开发语言前面已经提到过，微信小程序不是用 HTML 开发的，也不兼容 HTML 标记，它是一套自有的语言（暂且叫 WeLang），使用 WeLang 开发出来的页面，其体验是与原生 app 接近的，因为除了数据，定义页面的样式、数据结构、逻辑等文件已经提前下载，不像网页那样需要实时加载，而且，因为页面可以调用小程序提供的组件，这些组件早已内置在微信客户端，它们的体验其实就是「原生」的。这样的体验，是非常流畅，非常原生的。 7、前端开发成本极低前端开发其中一个最大的成本是兼容性适配，不管是做网页的前端需要适配各种浏览器，还是做 Android 客户端开发，需要在各种尺寸、性能不同的设备中反复调试。对于创业公司来说，这些成本的支出是不划算的，因为创业公司需要快速将产品推出市场，兼容性问题往往为快速迭代带来障碍。开发微信小程序，对于前端工程师来说，成本是相对较低的，因为微信已经解决了兼容性问题，前端工程师只需要学习 WeLang，然后按照规范去开发，兼容性问题，交给微信。一次开发，多平台通用。 8、支持离线使用与 Websocket 的想象力微信小程序支持离线使用，也支持后台运行，这为小工具带来想象力。比如，像万年历、Todolist、番茄闹钟这样的工具，会大量出现。我更期待的是，微信将来提供一种会话与小程序之间直接通信的能力。小程序很多 API 与服务号类似，但其中的 Websocket API 是新增的。很多拿到内测的朋友都跟我说，这个新的 API 可以带来巨大的想象力，比如，你可以在小程序里打造一个「你画我猜」的游戏。 9、NO游戏，NO直播，NO社交目前版本小程序文档里明确写明，游戏类、直播类、小程序导航，小程序链接互推，小程序排行榜等都不能提交。我们自己提交了一个类似聊天室的小程序，也被微信告知不能过审核。 10、有审核机制前面提到了「提交」这个词。和订阅号、服务号不一样，你发文章不需要通过微信审核，你改按钮功能也不需要，但小程序的每个版本更新，都必须通过微信审核 — 就像 App Store 那样。对用户来说，这是好事，意味着大部分通过审核的服务都是质量过关的，坏消息是，对于只把目光放在营销层面的人，这里又是另一个限制。写在最后：我们正在遵循微信的建议准备第一个小程序，预计很快大家就能使用到侯斯特开发的小程序。同时欢迎你来找我讨论如何设计自己的小程序。但是希望靠小程序解决目前公众号粉丝少、活跃度低、转化差的现状，我们认为是不现实的，在后微信营销时代，精耕细作才是王道。4714 条评论分享收藏感谢收起开始开发应用号之前，先看看官方公布的「小程序」教程吧！（以下内容来自微信官方公布的「小程序」开发指南）
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。
1. 获取微信小程序的 AppID
首先，我们需要拥有一个帐号，如果你能看到该文档，我们应当已经邀请并为你创建好一个帐号。注意不可直接使用服务号或订阅号的 AppID。 利用提供的帐号，登录&，就可以在网站的「设置」-「开发者设置」中，查看到微信小程序的 AppID 了。
&ignore_js_op&
注意：如果我们不是用注册时绑定的管理员微信号，在手机上体验该小程序。那么我们还需要操作「绑定开发者」。即在「用户身份 - 开发者」模块，绑定上需要体验该小程序的微信号。本教程默认注册帐号、体验都是使用管理员微信号。
&/*********************************************************************
&微信小程序全套视频教程在线观看地址：
&由于上传到腾讯视频后，视频文件被自动压缩了，导致在线观看的视频不是特别清晰。
&如需清晰版的视频文件，请从以下链接下载：
本套视频教程包含了微信小程序开发的基础知识，特别适合学习微信小程序开发入门使用，请按照顺序观看学习。
本套教程原来销售199元，现免费奉送，所有内容都是笔者亲自录制。
需要课程讲解中用到的示例源码请关注微信公众号：&微little程序&，按照提示获取源码。关注成功后，也可直接点击公众号中的&视频教程&菜单，详细了解获取配套示例源码的方式。
拿到示例源码后，自己再做尝试，学习会更有效果。
也可扫描下方二维码关注该公众号：
******************************************************************************/
2. 创建项目
我们需要通过开发者工具，来完成小程序创建和代码编辑。
开发者工具安装完成后，打开并使用微信扫码登录。选择创建「项目」，填入上文获取到的 AppID，设置一个本地项目的名称（非小程序名称），比如「我的第一个项目」，并选择一个本地的文件夹作为代码存储的目录，点击「新建项目」就可以了。
&ignore_js_op&
为方便初学者了解微信小程序的基本代码结构，在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择「是」，开发者工具会帮助我们在开发目录里生成一个简单的 demo。
项目创建成功后，我们就可以点击该项目，进入并看到完整的开发者工具界面，点击左侧导航，在「编辑」里可以查看和编辑我们的代码，在「调试」里可以测试代码并模拟小程序在微信客户端效果，在「项目」里可以发送到手机里预览实际效果。
3. 编写代码
点击开发者工具左侧导航的「编辑」，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js 后缀的是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
app.js 是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用 MINA 提供的丰富的 API，如本例的同步存储及同步读取本地数据。
&font size="3" face="微软雅黑" style=""&//app.js
&&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)
& & }else{
& && &// 调用登录接口
& && &wx.login({
& && &&&success: function () {
& && && & wx.getUserInfo({
& && && && &success: function (res) {
& && && && &&&that.globalData.userInfo = res.userI
& && && && &&&typeof cb == "function" && cb(that.globalData.userInfo)
& && && && &}
& && && & })
&&globalData:{
& & userInfo:null
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口&&背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
&font size="3" face="微软雅黑" style=""&/**app.json*/
&&"pages":[
& & "pages/index/index",
& & "pages/logs/logs"
&&"window":{
& & "backgroundTextStyle":"light",
& & "navigationBarBackgroundColor": "#fff",
& & "navigationBarTitleText": "WeChat",
& & "navigationBarTextStyle":"black"
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
&font size="3" face="微软雅黑" style=""&/**app.wxss**/
.container {
&&height: 100%;
&&display:
&&flex-direction:
&&align-items:
&&justify-content: space-
&&padding: 200rpx 0;
&&box-sizing: border-
3. 创建页面
在这个教程里，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径 + 页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js 后缀的文件是脚本文件，.json 后缀的文件是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的文件是页面结构文件。
index.wxml 是页面的结构文件：
&font size="3" face="微软雅黑" style=""&&!--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 class="usermotto"&
& & &text class="user-motto"&{{motto}}&/text&
&/view&&/font&
本例中使用了 、、 来搭建页面结构，绑定数据和交互处理函数。
index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
&font size="3" face="微软雅黑" style=""&//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
index.wxss 是页面的样式表：
&font size="3" face="微软雅黑" style=""&/**index.wxss**/
.userinfo {
&&display:
&&flex-direction:
&&align-items:
.userinfo-avatar {
&&width: 128
&&height: 128
&&margin: 20
&&border-radius: 50%;
.userinfo-nickname {
&&color: #
.usermotto {
&&margin-top: 200
页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
index.json 是页面的配置文件：
页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
logs 的页面结构
&font size="3" face="微软雅黑" style=""&&!--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&&/font&
logs 页面使用&&控制标签来组织代码，在&&上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点
&font size="3" face="微软雅黑" style=""&//logs.js
var util = require('../../utils/util.js')
& & logs: []
&&onLoad: function () {
& & this.setData({
& && &logs: (wx.getStorageSync('logs') || []).map(function (log) {
& && &&&return util.formatTime(new Date(log))
运行结果如下：
&ignore_js_op&
4. 手机预览
&ignore_js_op&
开发者工具左侧菜单栏选择「项目」，点击「预览」，扫码后即可在微信客户端中体验。
目前，预览和上传功能尚无法实现，需要等待微信官方的下一步更新。
如你所见，微信官方给出的开发指南还非常简单，很多细节、代码和功能都没有明确的展示，所以接下来就到博卡君展示实力的时候啦！开发教程正式开始！
第一章：准备工作
做好准备工作很重要。开发一个微信应用号，你需要提前到微信的官方网站（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」文件是引入的样式文件，你也可以直接在里面写样式，示例中采用的是引入方式：
&ignore_js_op&
9. 修改代码后刷新一次，可以看到未设背景的「view」标签直接变成了粉色。
注意：修改「wxml」和「wxss」下的内容后，直接 F5 刷新就能直接看到效果，修改「js」则需点击重启按钮才能看到效果。
10. 另外，公共样式可以在「app.wxss」里直接引用。
&ignore_js_op&
11. 「Js」文件需要在「app.json」文件的「&page&」里预先配置好。为了项目结构清晰化，我在示例项目中的「index」首页同级目录新建其它四个页面文件，具体如下：
经过以上步骤，案例中的五个底部菜单就全部配置完毕了。
注：要做一个内容可以更新的小程序，单有前端开发是远远不够的，还需要后台开发。后台开发与web开发的后台基本无异，可以选择用java、php、nodejs等任一语言，有一点需要注意的是小程序后台服务器必须是https协议的，这就要求必须购买云服务器并将后台服务器设置成https服务。而做这些的前提是要先购买好服务器和域名。服务器可以选择腾讯云服务器，购买地址如下：
要做一个可更新的小程序单有云服务器也还是不够，因为内容是可更新的，所以实际在小程序上看到的内容，我们大部分是存储在数据库中，所以我们还需要购买云数据库，这个腾讯云也有提供，购买地址如下：
而域名的购买，腾讯云也可以提供，购买地址：
微信小程序微信公众号&微little程序&，扫码关注：
QQ交流1群：(已满)
QQ交流2群：
阅读(...) 评论()
友情链接:(联系QQ:)}