微信小程序开发环境搭建

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来。
不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习。不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具。那么接下来就让我们一起来开始吧


微信已于9月23号晚发布了最新开发工具,以及官方文档,新版开发工具支持无appid登录开发者工具,所以可去官网直接下载使用。官网地址

本人目前要做一款仿 QQ的小程序,正在持续更新中

GitHub地址(内含官网demo和开发文档及官方开发工具)

目前项目更新状态:欢迎star,共同学习
消息页面:


这里写图片描述

联系人页面:


这里写图片描述

动态页面:


这里写图片描述

先放一张Github上demo的动态图

这里写图片描述

开发工具下载到GitHub上的分享。那么你可以直接进入该GitHub,找下载链接即可下载。
当然我把安装顺序以及遇到的问题在此详细介绍一下。(接下来按照此步骤安装即可成功(windows版))

下载微信小程序开发工具0.7.0版本(下载链接http://pan.baidu.com/s/1nuIJnBV密码:ru3h)因为0.9.0版本有登陆验证,直接安装一直登陆不上,一直提示please bind your wechat account to the appid first,扫码扫了上百次也没登录上(是有多大的耐心),下载0.7.0版本后直接安装,安装过程很简单,选择安装目录下一步就可以了,安装成功后登陆进入程序出现,需要微信扫码登录,登录后成功出现如下界面,然后退出

这里写图片描述

然后下载0.9.0版本(下载链接http://pan.baidu.com/s/1hskDLZY 密码46gv)
下载后直接覆盖安装就可以了(要覆盖安装),安装后先不用打开开发工具,即使你想打开也进不去。直接登录会出现如下提示

这里写图片描述

因为程序是没有破解的。安装程序后需要下载三个js破解文件替换掉我们安装程序的对于目录的对应文件。直接进入该GitHub下载,Github链接https://github.com/gavinkwoe/weapp-ide-crack
下载下图的三个文件

这里写图片描述

我将工具安装到D盘了,分别找到下面三个目录替换对应文件即可

D:\微信web开发者工具\package.nw\app\dist\components\create\createstep.js

D:\微信web开发者工具\package.nw\app\dist\stroes\projectStores.js

D:\微信web开发者工具\package.nw\app\dist\weapp\appservice\asdebug.js

替换文件后即可登录成功了,登录后界面如下

这里写图片描述

那么我们直接点击添加项目,点击后界面

这里写图片描述

因为我们没有内测账号,这个appid可以随便输入,项目名称,及开发目录就随便写了。
填好信息后点击添加项目

这里写图片描述

OK,神奇的事情出现了,一个helloworld项目就出现了。

点击编辑


这里写图片描述

选择对应的文件即可编写代码了。

调试

这里写图片描述

点击调试按钮,左上有可以选择调试的移动终端,里面可以选择苹果,三星及其他不同分辨率设备。设备右边有选择网络的按钮,可以选择wifi,2G,3G,4G网络。在右边的窗口,有console可以查看控制台打印的信息,以及网络,存储信息等。

这里写图片描述

我们点击最右上角按钮,与选择显示console,查找文件,快捷键,以及传感器,渲染设置,帮助等。在左下角有清楚缓存,重启小程序,按钮。

对了GitHub有个demo,我们可以把这个demo复制到我们的开发目录下,看下微信小程序效果,刚才创建的是一个helloworld,太简单,看不出它的魅力。


这里写图片描述

动态图我放到前面了。

好了就简单介绍到这里,想了解更多内容,请看开发文档

简易教程

微信小程序组件

开发者工具文档

常见问题

抢先看:微信官方发布的微信应用号(小程序)设计规范

微信小程序开发教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • 由于小程序目前开放了个人注册,以及最近的一大波给力权限更新,好像小程序热又回来了。但有句古话说的好啊,“工欲善其事...
    HarwordLiu阅读 3,154评论 0 4
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 文 / shine 01 前天上班,监考,改试卷。一张160分的数学试卷,分A、B卷,其中B卷是竞赛题,都是非常难...
    郑巧阅读 705评论 0 2
  • 大家继续我们来用卡牌一探究竟 ❶找出愤怒的现象。我对抗的是…(1001卡) 我对抗的是别人不接纳我,那样我感到失落...
    海霞OH卡咨询师阅读 283评论 0 0