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


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 相关文章推荐
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
js实现简易拖拽的示例
Oct 26 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引用地址改变变量值的问题
2012/03/23 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
window.location.hash 使用说明
2010/11/08 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
学年末自我鉴定
2014/01/21 职场文书
社区包粽子活动方案
2014/01/21 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
物业客服专员岗位职责
2015/04/07 职场文书