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

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

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

小程序开发文档地址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，下一章节我们会一步步的来实现我们的小程序

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 商城开发（ecshop ）简单实例

    微信小程序 商城开发（ecshop ）简单实例

    最近小程序特别火,所以我们公司也针对ecshop平台对接了小程序 包括完整的用户系统和购物体统 用户系统:收货地址,订单管理,消息管理,优惠券管理等等 购物系统支付购物车管理,微信支付等等 相信有很多小伙伴都用的是ecshop作为自己的商城,最近小程序又火了,于是就有人问ecshop对接小程序怎么做. 正好最近在开发一个对接ecshop的小程序项目,就将我的一些开发经验分享一下. 一:扫描小程序二维码后的用户信息的获取和缓存 获取用户信息需要用到两个api wx.login(OBJECT) 调用

  • 微信小程序商城项目之购物数量加减（3）

    微信小程序商城项目之购物数量加减（3）

    我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

  • 微信小程序商城项目之商品属性分类（4）

    微信小程序商城项目之商品属性分类（4）

    续上一篇的文章:微信小程序之购物数量加减 -- 微信小程序实战商城系列(3) 所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view> <!--options--> <view class="commodity_a

  • 微信小程序商城项目之侧栏分类效果（1）

    微信小程序商城项目之侧栏分类效果（1）

    在商场项目中,一般都会有分类页面. 分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图 布局分析: <主盒子> <左盒子></左盒子> <右盒子></右盒子> </主盒子> 左盒子使用标准流 右盒子使用绝对定位(top.right) wxml: <!--主盒子--> <view class="container"> <!--左侧栏--> <view class

  • 微信小程序购物商城系统开发系列-目录结构介绍

    微信小程序购物商城系统开发系列-目录结构介绍

    上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的小demo. 这一篇文章我们主要的是介绍一下小程序的一些目录结构,以及一些语法,为我们后面的微信小程序商城系统做铺垫. 首先我们来了解下小程序的目录结构 Pages 我们新建的一些页面将保存在这个文件夹下面,每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js.index.

  • 微信小程序商城项目之淘宝分类入口（2）

    微信小程序商城项目之淘宝分类入口（2）

    分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程序的页面跳转和参数传递 -- 微信小程序教程系列(6) 页面分析: 使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项. 这样满5个item后,自动排在下一行 wxml: <view class="menu-wrp"> <!

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

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

    微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

  • 微信小程序点餐系统开发常见问题汇总

    微信小程序点餐系统开发常见问题汇总

    java后台相关问题 一,程序包lombok不存在 通常报这个错误,是因为,我们的开发者工具idea没有安装lombok库导致的 解决办法如下: 提示我们没有安装,我们就安装一个不就行了,下面来教大家如何安装. 1,点击扳手进入设置页 2,点击plugins,然后搜索lombok,点击install即可安装 3,安装完成后,重启idea开发工具即可 二,无法执行sql文件,IDEA 2019.1连接数据库报错(08001) 链接mysql数据库报如下错误 08001 could not conn

  • 微信小程序实现商城倒计时

    微信小程序实现商城倒计时

    本文实例为大家分享了微信小程序实现商城倒计时的具体代码,供大家参考,具体内容如下 index.html: <view class="countDownTimeView pull-left countDownAllView text-left"> <text>倒计时:</text> <text class="voteText countDownTimeText">{{countDownHour}}</text>

  • Java微信小程序医院挂号系统

    目录 一.前言介绍 二.系统功能分析 2.1用户的功能设计 2.2管理员的功能设计 2.3医生的操作界面为 2.4系统功能结构 三.微信端登录界面的实现 3.1用户注册功能的实现 3.2登录功能的界面实现 四.用户角色功能的界面实现 4.1医生浏览功能的界面实现 4.2医生预约挂号功能的实现界面 4.3挂号记录管理功能的实现界面 4.4就诊记录功能的界面实现 4.6疾病料普浏览功能的实现界面 4.7在线答疑功能的实现 五.医生角色功能的设计界面 六.管理员功能的设计实现 6.1用户管理功能的实现

  • 微信小程序 底部导航栏目开发资料

    微信小程序 底部导航栏目开发资料

    微信小程序 底部导航栏目开发 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备 阿里图标库  http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮 在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 将上述起好名字的图标 保存到 小程序

  • 微信小程序如何使用云开发

    微信小程序中的云开发想必大家还不是很熟悉,因为云开发也就是9月份上线的,相比之前大家对于数据库的存储都是用的是自己的服务器,接下来这篇文章主要为大家介绍下怎么使用云开发,网上看过很多文章感觉介绍的不是很详细,下面通过我个人亲身经历整理下自己的思路吧. 首先介绍下云开发主要的三大特点,目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库 存储:在小程序前端直接上传/下载云

  • 微信小程序+后端(java)实现开发

    前言 现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序.所以现在用这篇博客记录我之前开发的一些经验和一些心得吧. 主要内容 springboot后端架构构建 小程序项目构建 小程序api调用 后台resetful接口编写 小程序调用后台接口 免费的https申请 linux下部署上线 微信小程序项目构建 这些基础的东西我就不过多介绍,大家在刚开始开发的时候一般都没有自己的服务器及域名

  • 微信小程序后端Java接口开发的详细步骤

    微信小程序后端Java接口开发的详细步骤

    目录 1.搭建一个springboot项目并引入依赖 2.编写controller层 3.创建微信小程序项目 微信小程序使用wx.request(OBJECT)来调用后端接口. 首先 我们来一个简单案例 -- helloworld实现 1.搭建一个springboot项目并引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-

  • 微信小程序中的生命周期与生命周期函数浅析介绍

    微信小程序中的生命周期与生命周期函数浅析介绍

    目录 一.生命周期 概念 分类 二.生命周期函数 概念 作用 分类 三.总结 一.生命周期 概念 生命周期(Life Cycle)是指一个对象从创建-->运行-->销毁的整个阶段 小程序的生命周期 小程序启动,表示生命周期的开始 小程序关闭.表示生命周期的结束 中间小程序的整个运行过程就是小程序的生命周期 分类 应用生命周期 特指小程序从启动-->运行-->销毁的过程 页面生命周期 特指小程序中每个页面的加载-->渲染-->销毁的整个过程 自定义组件生命周期 组件实例被

随机推荐