都知道 - 都知道 - 知识图谱网站

小程序开发工具

微信小程序开发工具

软件简介软件截图精品软件用户评论微信小程序开发工具破解版是专门为微信小程序推出的一款开发工具,该工具拥有简洁明了的操作界面,用户无需安装即可直接使用,非常的方便快捷,同时它具备了众多可靠的辅助功能,可以为用户的开发过程带来便利。


【基本介绍】随着小程序正式上线,用户现在可以通过二维码、搜索等方式体验到开发者们开发的小程序了。
用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小程序。
值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换。
用户使用过的小程序,将以列表的方式呈现在小程序TAB中。
如此前微信团队介绍的一样,小程序可以分享至对话。
“自选股”小程序分享展示
安卓版用户还可将小程序添加快捷方式至桌面。
从试用结果来看,小程序整体运行顺畅,而开发者也对小程序抱以很大热情,例如猫眼电影提供了小程序体验礼包。
在体验了自选股、美团外卖、猫眼电影、滴滴公交查询几个小程序后,可以感受出,开发者将APP中最核心的功能在小程序中做了保留,对一些功能则进行了舍弃。
比如滴滴出行小程序,仅保留了叫车功能,而APP中的地图、出行方式选择、用户界面、商城等功能都被舍弃掉了。
自选股小程序对APP功能做了相对更多的保留,仅舍弃了“资讯”作为独立板块,而保留了自选、行情、设置三个主要功能板块。并且提供了与APP中一致的股价提醒等功能,分享具体股票页面,好友点击查看到的是实时股价信息,体验非常完整。
微信团队此前提到的公众号关联功能在当前的公众号主页已经能够体现。
在开发了小程序的公众号主页上,能够看到该主体开发的小程序,点击即可进入相应小程序。由于处于同一账号体系下,公众号关注者可以更低的成本转化为小程序的用户。
对于一些有意将公众号进行产品化的团队而言,小程序及其与公众号之间的关联将大大节省开发成本及导流成本。对于内容创业者而言也提供了不错的内容产品化工具。
【软件功能】1.使用真实用户身份,调试微信网页授权。



2.校验页面的JSSDK权限,以及模拟大部分SDK的输入和输出。



3.利用集成的ChromeDevTools和基本的移动调试模块,协助开发。


【安装步骤】1、在本站下载微信小程序开发工具
2、打开文件进行安装,可以看到当前的是最新版本,不是微信公众号文档里面的旧版本



3、注意路径不要带中午,否则可能安装出错,把最后的一段中文随意改一个英文旧可以了





4、等待安装完成,这个时间有点长,需要耐心等待



5、下载完成之后,就可以进行小程序开发了


【使用教程】安装完开发工具后,会自动在桌面添加微信web开发者工具图标。通过点击微信web开发者工具图标打开微信小程序开发工具,然后用自己的微信软件扫描二维码登录,进入微信web开发者工具。



进入开发工具后,那个demo是由微信提供的,我们需要点击最左小角的关闭按钮,退出当前这个项目。然后点击添加项目添加一个新的项目,进入项目信息填充界面。







如果你有微信提供的AppID,那就再AppID那里填入你获取到的AppID。如果没有,那么就点击无AppID。
在项目名称那里,填入你自己项目的名称(这个随便填)。
项目目录那里,如果你是新创建一个项目,那么首先点击选择,选择一个存放你项目的文件夹。如果你是导入项目,那么就找到你那个项目的位置,直接导入就可以了。
最后店家添加项目就可以了。









注意事项

如果没有AppID那么就点击无AppID便可
每次写完代码,都要把当前page的代码保存。微信小程序工具不会帮你自动保存的。
微信小程序工具代码补全功能不好,很多代码需要完全自己手敲
【使用技巧】微信小程序开发工具如何加载本地图片?

打开微信开发工具,选择小程序项目,没有的可以自己创建一个模板程序即可。这里我已经打开我的项目了。一开始当你扫码登录了开发工具之后,最先看见的是下面左边的图。这里我们添加了一张图片,效果就像右边的图了。





我们开发微信小程序自然是得读官方开发文档的。html+css+js就相当于这里的wxml+wxss+js,所以原理上一样,微信官方封装了点东西罢了。这里我们要添加图片,那么就得找到组件或者叫做控件,我们从文档里面找到组件的文档说明,如下图。



首先我们要添加本地图片,这里微信开发工具不支持在项目目录下直接添加文件,所以我们就打开点打开硬盘,回到项目的本地目录下,创建一个图片目录放置我们的图片即可,微信开发工具会自动识别项目下的目录和文件的了。





这里我提一下吧,由于微信我们个人的微信小程序只能上传2M,所以图片不能很大,否则以后的程序就没法写了,这里建议使用webp或者svg格式图片,没有的可以转换一下格式,原来8k的图片转了后变成2k,也还行吧。然后我们在index.wxml文件里添加一个image组件,如下图,src使用双引号填入图片的相对地址,当然了这里也是可以使用网络地址的。如下图。









我们添加了图片以后,就可以在index.wxss文件中写入css样式了,应用到我们的图片上的了。这里我复制了一下下方的css样式,改了个名字。



如果我们在image组件里面使用style属性写样式,那么这里将会先应用style属性的样式了。微信开发工具里面的注释也是可以使用ctrl+/来进行快捷注释的。这个很方便。





最后我们更改一下图片的大小样式,其他的也就以后再说了,添加本地图片仅仅只是第一步,当然,如果你开发一个简单的用于宣传的微信小程序,一个图片就足以了。效果如下图。





注意事项

注意如果你没有设置图片宽高,图片的默认宽高是300px和225px。
注意图片的大小和格式