微信web开发者工具Mac版 V0.11.122100微信小程序开发必备工具 0.11 最新版
投诉建议：
千万流量共享 百度高权重排名
软件大小： 37.5M
软件厂商：
软件语言： 简体中文
软件授权： 免费
软件评级：
应用平台：WinAll
更新时间：
编辑推荐：
微信小程序开发必备工具是一款非常好用的软件开发平台，这里提供的是破解版，超多好用功能，相信对您的开发大有裨益，微信小程序已然重磅上线，期待您为其注入更多优秀功能。软件截图1微信小程序开发必备工具简介：微信小程序开发工具(微信web开发者工具)是由腾讯微信推出的一款专门可以在微信做小程序的开发工具。微信小程是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。而微信小程序开发工具能够帮助开发者简单和高效地开发微信小程序，开发工具集成了开发调试、代码编辑及程序发布等功能。要注意的是：启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信帐号。使用须知：为了帮助开发者简单和高效地开发微信小程序，我们推出了全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能。软件截图2扫码登录启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信帐号调试工具调试工具分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage以及Wxml PannelWxml Pannel 用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的 wxml 代码。软件截图3Sources PannelSources Pannel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources Pannel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。软件截图4Network PannelNetwrok Pannle 用于观察和显示 request 和 socket 的请求情况软件截图5Appdata PannelAppdata Pannel 用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。软件截图6Storage PannelStorage Pannel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。软件截图7Console PannelConsole Pannel 有两大功能：开发者可以在此输入和调试代码小程序操作区：小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口，会触发一个小程序被设置为后台的api。软件截图8当小程序使用到多窗口的时候，可以在顶部操作区进行页面切换，需要注意的是这个操作只是为了方便开发者才存在的，在真实的微信客户端中是不会有的。软件截图9微信小程序相关视频：
1017.0KB|15MB|21MB|29MB|304MB|21MB|
聚超值推荐
今日更新推荐
软件分类目录
同类软件下载排行
热门关键词当前位置：
微信小程序适合做什么？微信小程序适合开发什么
在创业黑马@深圳创交会分享环节，腾讯云布道师贺嘉详细讲解了腾讯对于小程序的定位，以及开发者们如何更好的使用小程序。
　　在创业黑马@深圳创交会分享环节，腾讯云布道师贺嘉详细讲解了腾讯对于小程序的定位，以及开发者们如何更好的使用小程序。　　以下是经韦物主义整理的演讲精华：　　小程序是改善用户体验的机会　　现在微信里面有一些应用，例如滴滴出行、地图等第三方应用，它们的使用体验都不太好。某种程度上，这些微信第三方服务体验的不足，对腾讯是一个机会。　　我们设想，(创业者/开发者)可以预先把文件缓存在微信存储端，当用户在微信打开第三方应用之后，不需要忍耐长达3-5秒白屏的时间，即开即用。　　小程序不能做什么?不适合做什么?　　目前“小程序”的接口，暂时不支持游戏、测试、直播等第三方应用，虽然未来我们会做一些完善，但这些也不是我们希望开发者去做的方向。　　腾讯对于“小程序”开发的应用场景理解，是——拿来做一些用户不经常使用，但是刚需的工具。例如，支付、购物、生活服务等。　　小程序也不太适合做展示，因为传统在VI(交互设计)经常用来做页面显示的border(边框)，小程序就不支持。小程序绝非H5开发。　　我们希望极简，在交互层面，如果你的应用设计比较复杂，可能需要修改你的交互方式。　　小程序适合做什么?　　小程序也有很多功能，如果你按照之前的方式在一个页面里面打开几个链接，会发现链接怎么失效了?我们会在小程序开发的时候把它们变成“引用”，而不是再跳转。　　小程序的开发过程不像做一个H5页面，还是更像一个基于BI(数据库)技术，做一个CI(一个PHP框架)的开发，更像基于C/S的开发。同时它有一个程序包(SDK)的概念，正常的文件里面也会获得这个对象。开发里面会有筛选。　　还有运营，小程序的运营是需要验证的。　　在程序开发过程中有这些挑战，主要是小程序开发怎么更像前端方向?更像CI(框架)方向?我们自己出了一个通用架构，你可以看一下，在小程序开发中严格遵守一点，我们会提供监控和高级服务，包括数据库等等。　　简单说，你在小程序开发过程当中，本来要买很多的后端服务器、CDN、域名解析等等，要花上一天的时间才能配置上。在腾讯云的解决方案中，你只需要点一下按键，一次购买，需要不到5分钟。　　在每一个移动端里面，都会有一些标杆性的场景。小程序现在由于还没有用户来同时使用，如果这个平台能火，一定是因为一些爆款。　　从这个层面来看，小程序在一些系统的接口给我们提供了更多的可能性，包括网络设备状况、重力感应、社交等等，提供了更多的接口。简单来说，在我看来，腾讯云给小程序提供了更多的接口，让更多的开发者和我们一起，用腾讯云和小程序给用户一些能力，让小程序的开发变得更加简单。
名称：微信
版本：6.5.8
最新评论(共条评论)
评论空缺中，快来抢沙发!
今日最热资讯本周最热资讯写文章不容易，打个赏支持下作者吧|赞赏4人打赏
收藏已收藏 | 111赞 | 62
分享到微信扫码分享到微信
百度产品运营师，微信号baiqinote
45 篇作品64 万阅读总量
热门问题12345678910微信小程序开发初体验--教你开发小程序 - ThinkPHP框架
微信小程序面世以来受到的关注颇多，直到最近我才动手尝试进行了小程序的开发，总体上感觉还是不错的，有一点不适应的就是要摆脱Web APP开发对DOM的操作。在这里我就把我是如何利用API开发微信小程序的过程写成教程，教大家快速上手体验一次微信小程序的开发。
补充: 之前忘了把源码发上来，完成之后就已经放在Github上了 下载：
在开始之前我们先来看下成品的效果图
我们先确定想要开发一款什么样的小程序，首先要符合「小」，因为我们这次是要体验小程序的开发，所以尽量不要弄得太复杂；其次是「快」，小程序里需要的数据啊、资源啊，最好是现成就有的，自己写个API什么的这就太耗时了，就不叫快速上手了。
所以呢，如果能调用现成的API那是极好的，经过一番挑选，我选择了聚合数据的历史上的今天这个API，调用这个API获取数据，我们只要做2个页面就可以完全展示出来了，又「小」又「快」哈XD
API一枚: 历史上的今天API
微信小程序开发者工具：
注: 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
res/现在你看到的目录结构应该是这样子的.
├──&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删除里面的代码，然后添加以下代码手动创建数据传入给页面渲染Page({
&&&&hidden:&true,
&&&&events:&[
&&&&&&&&date:&&&,
&&&&&&&&title:&&TodayOnHistory,&历史上的今天&&},
&&&&&&&&date:&&&,
&&&&&&&&title:&&TodayOnHistory,&历史上的今天&&},
&&&&&&&&date:&&&,
&&&&&&&&title:&&TodayOnHistory,&历史上的今天&&},
&&&&&&&&date:&&&,
&&&&&&&&title:&&TodayOnHistory,&历史上的今天&&},
&&&&&&&&date:&&&,
&&&&&&&&title:&&TodayOnHistory,&历史上的今天&&},
&&&&&&&&date:&&&,
&&&&&&&&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手动添加数据到这个页面中查看效果Page({
&&&&&&hidden:&true,
&&&&&&detail:&{
&&&&&&&&&&title:&&历史上的今天&,
&&&&&&&&&&content:&&历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天历史上的今天&,
&&&&&&&&&&picUrl:&[
&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&url:&&http://sjbz.fd..cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg&,
&&&&&&&&&&&&&&&&&&pic_title:&&这是图片标题&&}
&&&&&&&&&&]
现在页面布局都已经完成了，是时候调用API编写逻辑层的代码来填充数据到页面上了，在开始之前我们先清理一下无用的代码
打开app.js删掉无用的函数和属性App({
})以上这步是额外步骤，并不影响我们接下来要做的事情
打开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,
&&&&&&&&&&&&data:&{
&&&&&&&&&&&&&&&&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,
&&&&&&&&&&&&data:&{
&&&&&&&&&&&&&&&&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）》中「Promise对象」一节
最后还用到了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的使用，还需要各位亲自去实践，欢迎交流～
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。