您的位置：
关于小程序，我们看到了一个开放的微信
作者：字头社
　　昨天晚上，微信揭开了外界期盼已久的“应用号”神秘面纱——小程序。这可能是今年微信最重要的产品。
　　小程序这个名字取得其实有点意思。一是不落俗套，透出一股人畜无害的“技术宅”气质;二是“小”也很清楚地说明，这个产品区别于一般APP。
　　微信官方公布完“小程序”相关细节之后，有不少人指出，小程序将会对大量的APP产生威胁。但从目前所公布的这些细节当中，我们可以看到微信其实正在给开发者更多在用户面前“露脸”的可能性。重点是，微信也并非自身涉足新功能，而是将自身的能力给予更多的开发者。
　　1、小程序与苹果规则不会冲突
　　这几年，微信受益于移动互联网的红利，成长于iOS和Android两大平台，已经是首屈一指的超级APP。虽然微信也是一款平台级应用，但也必须遵守iOS、Android系统平台对应用所要求的规则，换句话说平台拥有对所有应用的生杀大权。
　　微信这种用户量巨大的产品，必然不会冒丝毫的风险去挑战苹果的规则。相信我，微信比任何人都清楚苹果的规则。
　　这两年，被称为“科技界春晚”苹果发布会，腾讯系产品的露出极为频繁。比如去年苹果重量级产品Apple Watch首次发布的时候，微信就被作为重点应用在发布会上进行了演示;刚刚过去的iPhone7发布会上，腾讯安全管家也被热捧了。
　　因为苹果知道，他们最大的市场在中国，而腾讯的应用拥有最大的用户群体。iOS如果抛弃微信，大量用户必然会涌向Android，这也是苹果不愿意看到的。
　　所以说，腾讯和苹果双方的关系只会越来越好，任何一方都不会去挑战这一关系。平台与平台上的应用互相促进，这种关系其实已经是一个非常好的典范。
　　2、微信的目的不是做应用市场
　　小程序这一产品形态，并非微信首创。几年前，百度就曾经推出过轻应用，当时包括UC、豌豆荚等浏览器和应用市场，也都尝试推出过这一功能，但基本上没有一个能将这个事情做成的。
　　这些产品用户量级其实都没有达到一定的层次，往往是平台单方面有激情，而开发者却没有从中捞到多少好处。当时那个市场环境，应用市场领域尚未开始或者才刚刚开始整合，起码还未出现明显的颓势，因此开发者也不会对这件事情产生兴趣，重点还是主攻应用市场。
　　微信做这件事会有所不同吗?
　　应该说，大环境就已经有很大的不同，现在应用市场已经整合，长尾APP露脸机会越来越少，流量越来越贵。这种情况下，开发者对于展示的需求已经达到了前所未有的迫切，从应用号推出之前就深受外界关注即可看出。
　　对于微信而言，在完成订阅号、服务号的布局和用户习惯培育之后，进一步往具体应用的部分功能方向推进，加上庞大且固定的活跃用户基数，理论上还是可能成功的。
　　但微信的目的不是做应用市场。目前微信已经建立了订阅号、服务号、企业号三大体系，小程序的出现，是对自己“平台级应用”的属性进一步升级与完善，从而增强用户活跃度。
　　当然，腾讯未来也可能会因为这个功能而获利，比如朋友圈广告业务就又多了一大批广告客户——开发者。
　　3、一个更加开放的微信
　　微信开放小程序这些接口，意味着“赋能”开发者，降低开发者的成本和应用维护难度，理论上凭借微信自身巨大的流量池，可以让长尾APP的部分功能有更多的机会展示在用户面前，刷出存在感。
　　这两年，微信发展迅速，极简的风格培育了极好的用户体验。微信牛逼之处，就是其实上面有很多功能，但是却让多数人觉得还是一款很轻的APP。小程序的推出，经历内测和全面开放申请，但最终会统一上线，通过用户主动搜索。
　　用户主动搜索而非微信推送，这仍然是为了维护用户体验，继续克制地保持“轻”的感觉，而统一时间上线，则是体现公平的规则，开发者开发的小程序，必须有足够的价值才能获得用户主动的青睐。
　　这种逻辑，其实和现在新媒体作者们有相似的逻辑。写文章的人，需要写出有意思有价值的内容才能吸引更多的读者粉丝，这两年内，我们看到越来越多有创新意义的文体也在出现。
　　至于做应用的人，则需要更多考虑用户的需求，凭借微信提供的这些工具，能否做出创新的应用吸引用户的注意，就看开发者的本事了。因此，小程序的推出，某种程度上也可能会推动眼下鲜有创新的APP市场会有更多的创新。
　　值得一提的是，微信推出小程序，赋能开发者更多的能力，搭建的是一个平台，而不是自己涉足各种各样的功能对开发者造成威胁。这种风格，与小马哥近年来所强调的开放、连接器、“半条命交给开发者”等概念和理论是相符合的。
　　无论小程序将来如何，至少，我们看到了一个更加开放的微信。
(转载请保留)
置顶推荐热门话题大家都在看
互联网的一些事，已超50万小伙伴关注！微信小程序开发初体验--教你开发小程序 - Android,iOS - mobile - ITeye论坛
微信小程序开发初体验--教你开发小程序
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
发表时间：&&
相关知识库：
微信小程序
微信小程序面世以来受到的关注颇多，直到最近我才动手尝试进行了小程序的开发，总体上感觉还是不错的，有一点不适应的就是要摆脱Web APP开发对DOM的操作。在这里我就把我是如何利用API开发微信小程序的过程写成教程，教大家快速上手体验一次微信小程序的开发。
补充: 之前忘了把源码发上来，完成之后就已经放在Github上了
在开始之前我们先来看下成品的效果图
完成效果预览
我们先确定想要开发一款什么样的小程序，首先要符合「小」，因为我们这次是要体验小程序的开发，所以尽量不要弄得太复杂；其次是「快」，小程序里需要的数据啊、资源啊，最好是现成就有的，自己写个API什么的这就太耗时了，就不叫快速上手了。
所以呢，如果能调用现成的API那是极好的，经过一番挑选，我选择了聚合数据的这个API，调用这个API获取数据，我们只要做2个页面就可以完全展示出来了，又「小」又「快」哈XD
微信小程序
注: API需要注册之后获得KEY才能使用，具体请查看官方文档，这里默认各位已经注册并拥有相应API所需的KEY
微信开发者工具的安装和使用在这里就不多作介绍了，有疑问的话可以看微信官方的
先创建一个工程，依次点击「添加项目」－－「无AppID」，然后填好「项目名称」并选择「项目目录」，点击「添加项目」
然后我们来清理一下默认工程的目录结构，删除以下目录和文件
pages/logs/
pages/index/index.wxss
创建以下目录和文件
pages/detail/ pages/detail/detail.js
pages/detail/detail.wxml
pages/templates/ pages/templates/item.wxml
现在你看到的目录结构应该是这样子的
├── app.js ├── app.json ├── app.wxss ├── pages │
├── detail │
├── detail.js │
└── detail.wxml │
├── index │
├── index.js │
└── index.wxml │
└── templates │
└── item.wxml ├── res └── utils └── util.js
这就是我们工程目录的最终结构了，后面还会添加资源进去，但是整体结构还是这样不会改变的
微信小程序是通过修改app.json文件改变全局配置的，具体的可配置项请各位自行查阅小程序文档的一节
打开app.json，修改成
"pages":[ "pages/index/index", "pages/detail/detail" ],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3e3e3e",
"navigationBarTitleText": "历史今日",
"navigationBarTextStyle":"white" },
"debug": true }
我们这里修改了导航栏的背景颜色(navigationBarBackgroundColor)、标题颜色(navigationBarTextStyle)以及标题内容(navigationBarTitleText)，为了方便查看调试信息，我还开启了debug模式
全局配置以及搞定啦，接下来正式开始编码
前面已经说了我们要做的是「历史上的今天」这样的一个小程序，所以同一个日期会有很多条目，最常见的布局就是做成列表
列表里会有很多的条目，数量是不确定的，所以我们不能在页面里写死了布局，这时候就要用到模板(template)了，我们可以在模板中定义代码片段，然后在不同的地方调用
我们来定义一个模板，打开pages/templates/item.wxml，添加代码
&template name="tItem"& &navigator url="../detail/detail?id={{item.e_id}}"& &view class="ui-list-item ui-pure-item ui-border-b"& &view class="ui-item-span"&&text&{{item.date}}&/text&&/view& &view class="ui-item-content ui-nowrap"&&text&{{item.title}}&/text&&/view& &/view& &/navigator& &/template&
注: 模板的使用细节请参考官方文档一节
接下来打开pages/index/index.wxml删掉里面的内容，我们要在这里编写列表页，这里会使用到我们上面定义的模板
&import src="../templates/item.wxml"/& &scroll-view scroll-y="true" class="flex-row ui-list ui-border-t"& &template is="tItem" data="{{item}}" wx:for="{{events}}"/& &view class="ui-tips"& &view wx:if="{{hidden}}"&&text&没有更多内容了&/text&&/view& &view wx:else&&text&内容加载中...&/text&&/view& &/view& &/scroll-view& &loading hidden="{{hidden}}"&Loading...&/loading&
可以注意到第一行使用了import将模板引入到页面中，然后再使用is属性，声明需要使用的模板，用data属性传入数据供模板使用
注: 模板拥有自己的作用域，只能使用data传入的数据
为了测试和查看布局效果，我们打开pages/index/index.js删除里面的代码，然后添加以下代码手动创建数据传入给页面渲染
hidden: true,
title: "TodayOnHistory, 历史上的今天" },
title: "TodayOnHistory, 历史上的今天" },
title: "TodayOnHistory, 历史上的今天" },
title: "TodayOnHistory, 历史上的今天" },
title: "TodayOnHistory, 历史上的今天" },
title: "TodayOnHistory, 历史上的今天" }
保存后点击开发工具左侧的编译，即可查看到效果
首页布局效果
注: 布局会用到图标字体，导入到res/下，样式则写在app.wxss全局样式表中，图标字体文件和样式请从源码中获取，这篇教程不作样式的说明
首页的布局已经完成了，暂时放下首页列表，接下来开始编写详细内容的页面
打开pages/detail/detail.wxml，添加内容如下
&view class="container"& &view class="ui-title ui-border-b"&&text&{{detail.title}}&/text&&/view& &view class="ui-content"&&text&{{detail.content}}&/text&&/view& &block wx:for="{{detail.picUrl}}"& &view& &view&&image mode="aspectFit" src="{{item.url}}"/&&/view& &view class="ui-pic-title"&&text&{{item.pic_title}}&/text&&/view& &/view& &/block& &/view& &loading hidden="{{hidden}}"&Loading...&/loading&
搞定，这个页面就这么简单就OK了，现在我们打开pages/detail/detail.js手动添加数据到这个页面中查看效果
hidden: true,
title: "历史上的今天",
content: "历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天",
url: "http://sjbz.fd..cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
pic_title: "这是图片标题" }
详细页面效果
现在页面布局都已经完成了，是时候调用API编写逻辑层的代码来填充数据到页面上了，在开始之前我们先清理一下无用的代码
打开app.js删掉无用的函数和属性
以上这步是额外步骤，并不影响我们接下来要做的事情
打开utils/util.js并清空里面的代码，添加如下内容
// 查询事件列表的Base URL const API_URL_L = "/todayOnhistory/queryEvent.php" // 查询详细信息的Base URL const API_URL_D = "/todayOnhistory/queryDetail.php" // 申请API获得的KEY const API_KEY = "YOUR API KEY" // 获取事件列表 function fetchEvents(today) { var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_L,
key: API_KEY,
date: today
header: { 'Content-Type': 'application/json' },
success: resolve,
fail: reject
}) return promise
} function getEvents() { var tmpDate = new Date() var today = tmpDate.getMonth() + 1 today = today + '/' + tmpDate.getDate() return fetchEvents(today)
.then(function(res) { // console.log(res.data.result) return res.data.result
.catch(function(err) { console.log(err) return []
} // 获取详细信息 function fetchDetail(e_id) { var promise = new Promise(function(resolve, reject){
wx.request({
url: API_URL_D,
key: API_KEY,
e_id: e_id
header: { 'Content-Type': 'application/json' },
success: resolve,
fail: reject
}) return promise
} function getDetail(e_id) { return fetchDetail(e_id)
.then(function(res) { // console.log(res.data.result) return res.data.result
.catch(function(err) { console.log(err) return []
} module.exports = {
getEvents: getEvents,
getDetail: getDetail
注: 请将API_KEY的值替换为你申请到的KEY
我们要利用API获取的数据有两种，一是「事件列表」，另一种是事件对应的「详细信息」，上面使用到了ES6原生提供的Promise对象，具体请参考阮一峰的《JavaScript 标准参考教程（alpha）》中一节
最后还用到了module.exports对外暴露两个函数，使外部可以调用
我们继续打开pages/index/index.js文件，修改成这样
const util = require('../../utils/util.js')
hidden: false,
events: []
onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 var self = this
util.getEvents().then(function(data) { self.setData({
hidden: true,
events: data
然后打开pages/detail/detail.js，修改如下
const util = require('../../utils/util.js')
hidden: false,
detail: {}
onLoad:function(param){ // 页面初始化 param为页面跳转所带来的参数 var self = this util.getDetail(param.id).then(function(result){
self.setData({
detail: result[0]
onReady:function(){ // 页面渲染完成 wx.setNavigationBarTitle({
title: this.data.detail.title
}) this.setData({
hidden: true })
这里我们调用了wx.setNavigationBarTitle方法动态设置导航栏的标题内容，需要注意的是必须在页面渲染完成之后，即onReady之后才能调用该方法修改导航栏标题
这次教程就到这里结束啦～涉及到的部分知识点并没有详细介绍和说明，如果有不明白的地方请大家根据我给出的链接去查看详细的介绍，此文权当快速上手的一个引子，更加深入的内容以及小程序的其他API的使用，还需要各位亲自去实践，欢迎交流～
文／Ruter（简书作者） 原文链接：/p/7a94a6b6be96
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术扫描或点击关注中金在线客服
下次自动登录
其它账号登录：
|||||||||||||||||||||||||
&&&&>> &正文
简直秒开！微信小程序初体验：打开速度比较APP还快
作者：佚名&&&
中金在线微博
扫描二维码
中金在线微信
扫描或点击关注中金在线客服
　　【PConline 资讯】近期备受关注的微信小程序已经在今天正式上线，不小用户也都第一时间进行更新体验一把。而微信小程序的所有功能也都是主打“触手可及，用完即走”这一理念设计，因此微信中也没有给小程序预留什么入口。所以想要进入小程序目前有三个方法：扫描二维码；别人分享；搜索。
　　而据媒体报道，在体验中发现，Android由于系统的开放，我们可以将小程序放到桌面上，点开即可跳转到小程序页面，当微信在后台运行时，基本秒开，启动速度比APP还快！
　　而当微信退出后台后，点击小程序图标，也会自动启动微信，并跳转到小程序页面，只是需要一定的启动时间。相对而言，由于iOS的封闭性，就只能通过微信发现页的入口进入，用起来有些麻烦。
　　虽然说目前这个功能才刚推出不久，还有很多地方需要完善，但是对于一些用户而言，这依旧还是一个相当不错的功能，毕竟有一些软件就可以直接使用不需要安装了。
责任编辑：cnfol001
我来说两句
24小时热门文章
栏目最新文章微信小程序正式上线，如何正确玩转？
　　【创plus导读】微信小程序已正式上线，会给创业者带来什么？　　历经了一年等待的小程序在万众瞩目下终于揭开神秘面纱，于今日凌晨正式上线。用户可以将微信更新至iOS6.5.3版本或Android6.5.3版本，开始尝试开启一个小程序，或者体验到各种各样的小程序。　　目前，用户可以通过扫描二维码和搜索的方式来使用开发者提供的小程序，也可以在发现页面访问已经体验过的小程序。另外，同一主体的小程序和公众号可以进行关联。　　据悉，“微信之父”张小龙发出了一条写着“”的朋友圈，配有六张苹果一代的产品发布图。意味着想要致敬另外一位伟大的产品经理乔布斯。　　因为日，是已故苹果前CEO史蒂夫·乔布斯在旧金山莫斯科尼(Moscone)会展中心发布了苹果的首款iPhone，距今已有整整10年时间。　　众所周知，1年前的微信公开课，张小龙提出要做应用号，经过 8 个月的研发，小程序（应用号）开始内测。它要接棒服务号，连接更多服务和场景。有业内人士评论道：“小程序希望用即用即走的方式激活线下的弱连接场景。”　　此后，张小龙又现身微信公开课会场，详细透露了微信小程序10个问题，包括今天小程序正式上线，无须安装以及可以被所有用户所使用。　　小程序的出现引发关注，然而如何通过微信小程序来看创业的整体趋势？　　有可能学院CEO阿禅作为小程序的首批内测用户，也是目前对小程序了解最深刻的人之一，在他凌晨发表的《小程序想要什么？》一文里表达了一些观点：　　外界对小程序的期待不断在变化，微信对小程序的定位，也一直在推演。从外部看到的信息来看，微信似乎更偏向于连接线下，即微信想通过二维码连接现实世界。　　作为一个创业者，如何才能获得更多的用户时间？小程序主推线下场景，除了带着腾讯「连接一切」的目的，其实也迎合了挖掘线下流量的趋势。相比之下，小程序比服务号更节省用户时间，缩短了用户获得服务的路径。而回到小程序本身，它就是一个生态。　　如何正确玩转小程序？以下是微信公开课（wx-gongkaike）的普及：　　一、线下扫码　　小程序最基础的获取方式，是二维码。大家可以打开扫一扫，通过微信扫描线下二维码的方式进入小程序。　　　二、微信搜索　　在微信客户端最上方的搜索窗口，你可以通过搜索获取一个小程序。　　三、公众号关联　　同一主体的小程序和公众号可以进行关联，并相互跳转，该功能需要经开发者自主设置后使用。　　一个公众号可以绑五个小程序，但一个小程序只能被一个公众号绑定。你可以通过公众号查看并进入所绑定的小程序，反之，也可以通过小程序查看并进入所关联的公众号。　　四、好友推荐　　当你发现一个好玩的或者实用的小程序，可以将这个小程序，或者它的某一个页面转发给好友或群聊。　　但是注意，小程序无法在朋友圈中发布分享。　　五、历史记录　　当你使用过某个小程序后，在微信客户端的“发现-小程序”里的列表，就可以看到这个小程序，想要再次使用它时，通过列表中的历史记录就可以进入。　　在“发现-小程序”中，也可以通过搜索进入小程序。　　知道了这么多可以抵达小程序的方式，还！不！够！　　为了让大家用得尽兴，关于小程序，还有更多功能要向大家介绍——　　小程序的玩法　　一、小程序切换　　小程序和小程序、小程序和聊天界面可以迅速切换。　　二、消息通知　　你可以收到小程序的模板消息和客服消息。　　三、附近的店　　这是一个最新的玩法。将来，你可以在“发现-小程序”里面的“附近的店”找到附近的小程序。　　创+手记　　在服务号失利、公众号流量渐趋饱和、朋友圈广告密度受限的情况下，小程序或将开启腾讯新的广告渠道，而二维码与商家和场景的紧密联系将打开LBS和本地广告的庞大市场，更直接对接中小商家和生活消费。
400-758-8028 / 027-
周一至周五，9:00 - 17:30
微信扫一扫
随时随地掌握资本动态}