微信·小程序开发工具安装指南及注意事项

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信·小程序开发工具安装指南及注意事项相关的知识,希望对你有一定的参考价值。

这两天闲来无事,也安装了 “微信折叠”的开发工具来玩一下。以下是一些小道消息及使用体验,过两天我会写一篇文章以开发者的角度来详细评价微信小程序:

  • 微信小程序不能开发游戏类、直播类功能,小程序每个人关注的上限是20个(还不确定,不过我相信这是真的,这次公布的API里并没有视频组件。微信太大,苹果要有所顾忌,但是微信也要做出相应的让步)
  • 微信目前有没有同苹果商谈好,还是个未知数,毕竟会对AppStore有一定的冲击。

  • 抛弃了大量的javascript组件后,这个生态体系变得相当的封闭,微信解释肯定是:为了更好的性能提升。那么我们拭目以待。

  • 小程序的入口是微信里的三级菜单,就是在“Tab栏发现里的游戏下面加入一个“小程序”。反正,这一栏里的购物和游戏我是从来没点进去过的。

  • 以腾讯的尿性,小程序同服务号一样,其关系链及重要功能的开放程度会因“人”而异。对,优质的接口只会开放给腾讯的儿子们(滴滴呀、京东呀)

  • 微信从来就是一眼不合就封杀,优步就是很好的案例。官方解释是优步涉嫌诱导,滴滴同样被禁过。利益面前还讲道理?反正我是不信的。腾讯的投资覆盖各个行业,一旦腾讯掌握了应用分发入口,给儿子们一些小小的甜头,应该不是什么大事儿吧。有人说AppStore也有很多限制,但至少苹果并没有像腾讯这样大量的投资消费级App,直接产生利益冲突的点并不多。话说回来,这点创业者是不用考虑的,暂时,你的产品和创意,在微信眼里还是个蝼蚁。。。你不用担心受到不公正的对待。如果真有一天你被微信封杀了,只要不是因为违规内容,那么你应该高兴,然后迅速炒作一波…….

  • 很多做Web的朋友尝试在小程序里写div、ul等标签,别试了,没效果,包括JQUERY在内的DOM操作库,小程序内是不能运行的。小程序本质是JS+ReactNative,对RN底层做了重构,已经和dom说拜拜了。

 

下面是详细的安装步骤(9月24日更新)。注意:9月23日给出的微信小程序开发者工具0.7和0.9破解版本已过时。微信官方已给出了不需要破解的0.9.092300版本。win10下测试通过

以下是安装步骤:

  1. 按操作系统下载相应开发工具版本

     windows 64位

     windows 32位

     mac

     小程序示例组件demo下载

  2. 双击安装

  3. 打开微信web开发者工具

  4. 添加一个项目,如图

    技术分享

  5. 填写项目信息 注意AppId这里选择“无AppId”,AppID只有内测用户才有,无AppId在目前有功能限制,比如不能发布项目到手机微信中预览。

    技术分享

  6. 点击“添加项目”按钮后,将创建一个小程序项目, 工具已经为你创建了一个demo —– Hello World

    技术分享

开发者工具功能区域介绍

工具左侧分别有编辑、调试、项目调试区按钮,分别解释3个区域的作用.。

编辑: 是你写代码的地方,左侧的文件目录是微信为你创建的一个项目基础骨架,你可以在这个骨架上编写自己的业务代码。当我们编写完代码后,点击编辑视图左下角的“编译”即可进行调试和运行(当点击“编译后”,工具视图会自动跳转到第二个“调试”视图)

调试: 是你调试代码的地方。整个界面同Chrome的调试工具一模一样(应该是内嵌了WebKit内核),相信有Web开发经验的同学很快就能上手。F8 运行到下一个断点、F10 单步运行、Ctrl+/ 注释代码。

解释一下“调试”视图下,顶部的六个Tab栏(Console、Sources、Network、Storage、AppData、Wxml):

 

Console: 工具的输出区域,在程序中调用 console.log(‘测试一下console’), 可在这里输出自定义调试信息。同时,这里也是工具遇到异常和发出警告的信息输出区域。见图:

技术分享

 

 

Sources: 源代码显示区域,这里你可以打断点并调试代码。Sources Pannel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources Pannel 中开发者看到的文件是经过处理之后的脚本文件,同编辑区域的代码有稍许的差异,比如开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。

技术分享

 

 

Network: 用于观察和显示 网络的request 和 socket 的请求情况

 

技术分享

 

 

Storage: 如果你在程序中使用了 wx.setStorage 或者 wx.setStorageSync 后,在这里将会显示你的数据存储情况。是的,小程序支持本地缓存数据。

 

技术分享

 

 

AppData: 用于显示当前项目当前时刻 appdata 具体数据。可以在这里管理应用程序中的各类变量(不同于Storage中的缓存变量,只有调用wx.setStorage 或者 wx.setStorageSync 的数据才会出现在Storage中)。在这,你可以随时修改变量,工具将把变量改变在左侧预览视图中实时显示。我们可以看到,AppData 以页面(pages/index/index)作为分组单位,每个页面只会显示自己的AppData,非常的清晰。

技术分享

 

Wxml:将Wxml标签同预览界面实时关联,在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。

技术分享

最后说下“项目”这个功能区块儿, 项目实际上是用来上传和预览项目的。微信要求所有发布的小程序都必须审核,所以需要在这里将小程序上传(应该是类似于AppStore,但肯定不是AppStore的发布模式,苹果应该不会允许。小程序目前同用户的接触方式还是未知数,而这恰恰是最重要的一块儿)。如果你没有被内测邀请,这里你是不可以上传和预览项目的,也不可以真机运行小程序,所以真正的体验相对于原生App还是未知数。目前阶段,你只能熟悉一下小程序的API,以便在公测后迅速拿出自己的产品,抢夺第一波红利。

总体来说,小程序的大概开发模式和模型 已经暴露,其本质是JS+RN,很多人说JavaScript程序员的春天来了,其实小程序的体系和Web开发还是有很多区别的。微信言下之意是要抛弃你们熟悉的DOM采用他的组件体系,更熟悉这种组件式开发的不是传统的Web前端,而是ios开发人员(更早点你可以追溯到Flex和SilverLight),我本人是不喜欢这种非JS原生的组件式开发的,自由度会受限。后续,我会持续更新小程序的开发例子和教程,尽快帮助大家上手开发业务和产品。你现在需要做的,就是静心想想,我应该开发一个什么样的产品?

 

关注 我的个人博客 www.imayi.me

以上是关于微信·小程序开发工具安装指南及注意事项的主要内容,如果未能解决你的问题,请参考以下文章

小程序·巧应用,微信小程序开发实战

微信小程序直播安装和开发指南

微信小程序 - 开发指南

注册微信小程序

微信小程序怎么设计 微信小程序设计指南

微信小程序零基础制作指南