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

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

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

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

时间: 2024-11-16 13:32:45

微信小程序购物商城系统开发系列-工具篇的介绍_javascript技巧的相关文章

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

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

微信小程序开发教程第七章:微信小程序编辑名片页面开发

前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发) 编辑名片有两条路径,分为新增名片流程与修改名片流程. 用户手填新增名片流程: 首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId,wx.navigateTo 带值跳转.Manual 为 true 设置用户走的是新增路线. 新增名片页面 1 基本

微信小程序开发教程第五章:微信小程序名片夹详情页开发

前面我们发布了博卡君的微信小程序开发教程前四章,现在接着更新第五章:微信小程序名片夹详情页开发.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发)   今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图:   备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息.点击微信栏.点击存入手机,地址栏需要地图展示,名片分享也是模态框指引. 首先是轮播图,autoplay 自动播放,interval 轮播

微信小程序之使用本地接口开发

本文主要讲解如何使用本地接口进行开发,很多人都会遇到这个问题,特别是小程序上线后. 一.解决思路 在小程序开发工具设置网络代理,然后再通过Charles设置代理,将https域名转为本地接口进行访问. 以下示例的环境为win7 + 老版本的微信开发工具 二.准备工作 1.配置https域名 为小程序配置request合法域名,在登录公众号平台去设置. 2.安装Charles 下载地址:https://www.charlesproxy.com/download/ 三.配置Charles 1.安装根

微信小程序 五星评分(包括半颗星评分)实例代码_JavaScript

微信小程序 五星评分 一位同学说要写五星评分.要有半颗星的评分. 于是我做了个玩具.有空了做模块化,这代码看不下去了. 代码: 1.index.wxml <!--index.wxml--> <block wx:for="{{stars}}"> <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-

移动开发之微信小程序——资料集合

本文转载自:知乎 有需要下载的客官可可以点击知乎去下载相关资料 一:官方地址集合:1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index

微信小程序开发教程目录

本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 微信小程序开发之picker 微信小程序开发之图片预览 微信小程序开发之模板 微信小程序开发之模板消息 微信小程序之页面路由 微信小程序开发之scroll-view 微信小程序开发之常见BUG 微信小程序之使用本地接口开发 微信小程序开发之普通链接二维码  

微信小程序应用号开发教程!博卡君通宵吐血赶稿

微信应用号(微信公众平台小程序,「应用号」的新称呼)终于来了!开源中国社区的博卡君通宵吐血赶稿写出的微信公众平台应用号开发教程!大家赶紧来学习一下吧 对了,昨天晚间微信小程序开发文档官方版发布了 微信公众平台小程序目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子?怎样将一个「服务号」改造成为「小程序」? 我们暂时以一款简单的第三方工具的实例,来演示一下开发过程吧.(公司的项目保密还不能分享代码和截图.博卡君是边加班边偷偷给大家写教程.感谢「名片盒」团

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发,第七章:微信小程序编辑名片页面开发) 先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作. 理清完基本流程我们开始开发.首先整个布局可以先看下,我再一步步讲. 静态布