微信小程序购物商城系统开发系列-工具篇的介绍


Posted in Javascript onNovember 21, 2016

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦。对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统、新的生态,未来大部分应用场景都将给予微信小程序进行研发。基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城。

本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器。

小程序开发文档地址https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

首先我们需要获取一下微信小程序提供给我们的代码编辑器

工具获取地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=20161107微信小程序购物商城系统开发系列-工具篇的介绍
下载地址我们可以根据我们电脑系统下载对应的版本

下载安装包后直接双击打开按照流程完成安装
微信小程序购物商城系统开发系列-工具篇的介绍
安装好后在桌面会有一个<微信web开发者工具> 这个就是微信小程序所提供的编辑器

下面我们就一步一步的来创建一个微信小程序微信小程序购物商城系统开发系列-工具篇的介绍
打开工具你会发现工具的使用需要通过微信扫描登录才可使用微信小程序购物商城系统开发系列-工具篇的介绍
扫码登录之后我们就可以选择我们需要建立的项目类型

这个我们选择新建一个本地的小程序项目
微信小程序购物商城系统开发系列-工具篇的介绍

点击添加项目
微信小程序购物商城系统开发系列-工具篇的介绍
这边依次填写你的APPID,项目名称以及你所建的项目的目录

目前已经开始公测 小程序的注册范围为企业,政府,媒体,和其他组织,也就是说个人是没有办法注册的,所以这个不在注册范围之内的可以选择无APPID来进行开发
微信小程序购物商城系统开发系列-工具篇的介绍
已经有的可以登录https://mp.weixin.qq.com 后台,在设置中查看到小程序的APPID微信小程序购物商城系统开发系列-工具篇的介绍
完成上面步骤添加完项目后,我们就可以进入到编辑器的界面微信小程序购物商城系统开发系列-工具篇的介绍

编辑器主要分为三个模块,编辑,调试,项目。

编辑:主要功能相当于我们代码编辑器的功能。

调试:这个类型于我们Goole浏览器的控制台一样

项目:这个地方主要执行的是发布代码和预览的地方

做前端的同行们应该都很容易上手这个就相当于,将我们以前web开发的编辑器,调试工具集成到一个环境中来。还是比较好理解的。
微信小程序购物商城系统开发系列-工具篇的介绍

在调试界面可以看到这个就类似于我们使用Goole浏览器开发H5网站时差不多。是不是找回点熟悉的味道啦!

在调试界面我们可以手动进行编译。(这边我们也可以在项目模块设置自动监听文件变化编译文件的)

手动清除缓存,查看控制台日志,网络请求…..等等。微信小程序购物商城系统开发系列-工具篇的介绍
接下来就是我们的项目模块,项目模块比较简洁。

这边可以执行项目的上传,和预览,以及整个IDE一些简单的配置。微信小程序购物商城系统开发系列-工具篇的介绍

这边需要注意的是这个上传代码需要管理员才能进行上传,当然没有没有AppID是上传不了的啦。由于现在是公测阶段,我们上传的代码也不能真正的让用户看到只有开发者可以看到。

另外下面这个预览功能可能是我觉得是整个IDE的唯一亮点。大家知道我们以前在做H5网站最头疼的就是在浏览器的模拟器上,一切正常可是到真是的手机上看就有各种兼容性问题。这个功能可以你在做完一个页面可以马上上传上去通过扫码来进行预览。
微信小程序购物商城系统开发系列-工具篇的介绍
这边需要注意的预览只能是在登录了和当前IDE相同微信号的手机上。其他手机通过微信扫码将不能进行预览。

好啦今天先介绍微信IDE,下一章节我们会一步步的来实现我们的小程序

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
全面解析node 表单的图片上传
Nov 21 #Javascript
利用fecha进行JS日期处理
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 #Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 #Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 #Javascript
js学习之----深入理解闭包
Nov 21 #Javascript
浅谈js原生拖放
Nov 21 #Javascript
You might like
php的ddos攻击解决方法
2015/01/08 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
Prototype Template对象 学习
2009/07/19 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Django学习笔记之Class-Based-View
2017/02/15 Python
python3中dict(字典)的使用方法示例
2017/03/22 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python Json数据文件操作原理解析
2020/05/09 Python
python 调用Google翻译接口的方法
2020/12/09 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
.net面试题
2015/12/22 面试题
品恩科技软件测试面试题
2014/10/26 面试题
给海归自荐信的建议
2013/12/13 职场文书
留学自荐信写作方法
2014/01/27 职场文书
大学自主招生推荐信
2014/05/10 职场文书
入党函调证明材料
2014/12/24 职场文书
2015新员工工作总结范文
2015/10/15 职场文书
分布式Redis Cluster集群搭建与Redis基本用法
2022/02/24 Redis
对象析构函数__del__在Python中何时使用
2022/03/22 Python
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技