开发微信小程序入门前

教程 dudulu ⋅ 于 2016-09-22 23:44:13 ⋅ 最后回复由 storefee 2017-08-16 22:04:00 ⋅ 13383 阅读

开发微信小程序入门前

2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅。个大新闻、论坛都在讨论这个事情。

作为互联网的一猿,我们怎能不紧跟时代的脚步。于是第二天上午也对微信发布的“小程序” 进一步的做了相关了解。

很多人问我这是什么?

我一般回答:这是未来

安装教程

关于使用教程网上已经有非常多的教程了,我在这里也不过多赘述,就简单的介绍一下。

想要快速的学习及开发微信的“小程序”(虽然它还没正式发布)我们首先需要一个“微信web开发着工具”这么一个软件,windows版与Mac版都有。注意,是0.9及以上的版本,0.7版本无法运行。

Mac版下载地址:wechat_web_devtools_0.9.092100.dmg
windows下载地址:wechat_web_devtools_0.9.092100_x64.exe

Mac的安装方式很简单,与普通应用的安装方式一样。

  1. 打开下载好用dmg文件
  2. 把"微信web开发者工具"拖进Application就算是安装完成了
  3. 依次打开"系统便好设置"->"安全与隐私"->"点按锁按钮以进行更改"->选择"任何来源"
  4. 根据提示点"是"、"打开" 然后就可以正常的打开应用了

以下是截图:

先用自己的开发者账号扫一下二维码登陆“微信开web发者工具”,登陆成功后会出现一下界面:

(我已经添加过了,所以不用在意这些细节)

点击“添加项目”

这是会提示输入AppId、项目名称、及项目地址, 如下图

什么是AppID?

注意:这里的App ID不是原来开发者帐号的那个App ID。

众所周知,腾讯只给发了200个开发者账号,那像咱们这种没有资格的怎么办?

我们是猿诶,在不影响他人利益的情况下当然选择破解。

题外话:

听说开发者帐号已经吵到300万了,不知道是真的还是假的!

  1. 每个用户只能有20个“小程序”
  2. “小程序”不能打开第三方应用
  3. 每个应用开发完后打包提交给微信进行审核
  4. 应用是在微信的服务器的
  5. 无法独立出一个独立的应用,只能在微信上使用

然后点"添加项目"就完成了一个项目的创建。

破解方法

windows与mac的破解方法基本相同,这里只以mac为例

先关闭开发者工具

下载这两个JS文件,分别替换各个目录中的文件

文件1: createstep.js
文件2: projectStores.js

替换的路径

  1. createstep.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/components/create/createstep.js
  2. projectStores.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/stroes/projectStores.js

替换完后启动应用,然后输入App ID(随便输入一个就行了)然后项目名、路径等。

这样就可以真正进入开发界面了。

注意:按照网上的教程需要重新启动一下“微信web开发者工具”原因可能是使用某些功能的时候会提示AppId未注册。

网上有一个微信Demo,也不知道是不是微信官方的,里边有大量的例子。

demo下载:demo.zip

这是一个比较全的demo,包含了大部份功能,及微信所开放的api。

点击关闭退出到项目选择页面,然后选择“添加应用”与上面方法相同,注意,“项目路径”选择刚刚所下载的“Demo” 让后启动,就可以体验大量demo了。

写一个hello world!

一般有三个文件:

  1. .wxml 相当于html与xml的结合体
  2. .js 就是js文件
  3. .wxss 某种css

需要注意的是目前小应用暂时不支持其他插件比如jQuery啥的。

选择"编辑"选项卡, 打开/pages/index/index.wxml

是不是很熟悉,就是html与xml的结合 先不做修改。然后打开 /pages/index/index.js

Page函数里的 data 对象里的 motto的值改成Hello Dudulu

bindViewTap 这个方法是绑定的跳转,如果你设置了userInfonickName的值,它将会显示在页面正中央,当你点击"nickName"的时候,它路由跳转到/pages/logs/logs.wxml

改完后回到"调式"选项卡,点击"重启"就可以刷新刚刚所修改的文本了。

运行效果:

这里有一个错误,github上已经有修复改错误的方法了,还需要替换一个文件:

  1. 文件3: asdebug.js

替换目录: /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/weapp/appservice/asdebug.js

就可解决以上报错的问题。


已经有大神把微信的官方文档给抓取下来了, 文档地址: http://notedown.cn/weixin/component


尾巴

咱们这种破解方式显然是不行的,我觉得微信可能会封掉这种方法,所以大家赶紧。

我说它是未来,这个大家自己体会,这次我们不能再错过了。

我们一起加油!

趁微信还没有封掉这种开发方式,趁这股热还在,我得赶紧发。
(在地铁上用手机码完,有错别字莫见怪)

转载于: http://lattecake.com/post/20098

本帖已被设为精华帖!
本帖由 Summer 于 1年前 加精
回复数量: 21
  • Summer MOD A Life-long learner.
    2016-09-23 04:57:02

    疯狂微信应用号

  • monkey 最重要的事,永远只有一件
    2016-09-23 07:28:56

    整个中国互联网都因此沸腾了

  • Yohooo Be cool
    2016-09-23 09:16:34

    微信小应用要火的节奏

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-23 09:58:01

    @monkey
    @Yohooo
    @Summer 所以咱们要跟上时代的潮流

  • dongdong1989
    2016-09-23 10:27:13

    windows版 破解完提示pls bind appID

  • Macken https://macken.me
    2016-09-23 10:37:16

    突然感觉,微信小程序开发特别像IOS开发有木有!

  • dongdong1989
    2016-09-23 11:00:27

    找到了,windows版要先装0.7 然后0.9 直接覆盖 再破解就好了!!!

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-23 11:17:49

    @dongdong1989 对,就是这么回事

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-23 11:18:03

    @Macken 不像啊

  • Macken https://macken.me
    2016-09-23 11:20:49

    @dudulu 封闭环境,开放接口,IOS生态和微信这个SuperApp这个生态...这些角度看~

  • overlords
    2016-09-23 11:54:52

    看了文档和RN特别像

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-23 11:58:33

    @overlords 对,一部份核心就是 react native

  • 江边望海 久在江边站,必有望海心!
    2016-09-24 11:21:46

    比郑州的房地产还热啊:smile:

  • mingyun
    2016-09-24 20:44:58

    都在玩呢

  • Destiny UI 精美、质量超高的技术博客 https://aabvip.com/
    2016-09-24 20:46:37

    你的文章非常好, 转载了, 我会注明出处! 谢谢 :punch:

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-25 23:04:54

    @ChinaGNU 谢谢谢谢谢谢

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-25 23:05:03

    @mingyun 对啊,超火的

  • dh9527
    2016-09-26 01:33:28

    看到签名写星座的来调侃下,话说天蝎还是搞营销更擅长:bowtie:,说回正题吧,感谢分享,学习了。

  • dudulu 不跑马拉松的摄影师不是好程序员(^ω^)
    2016-09-26 10:58:47

    @dh9527 啊哈,木有啊,这是个人介绍好像,一会我改掉

  • hyx50
    2016-09-28 16:14:35

    为微信开发而发而生的一个玩意.一生技术被微信困住了

  • storefee
    2017-08-16 22:04:00

    有个小问题望悉知:
    开头2016年09月21日晚 微信发不了微信“小程序”的内测版这句中的发不了应该是是发布了吗?

暂无评论~~
  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!
Ctrl+Enter