微信小程序开发教程？

1进入微信公众平台（t=201715根据系统，选择对应的工具版本下载2工具包含编辑、调试和项目三个页卡：（1）编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作（2）程序调试主要有三大功能区：模拟器、调试工具和小程序操作区（3）项目页卡主要有三大功能：显示当前项目细节、提交预览和提交上传和项目配置

注意：启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信帐号

三、编写小程序实例

1实例目录结构

2实例文件说明及源码一个小程序包含一个app（主体部分）和多个page（页面）（1）app是用来描述整体程序的，由三个文件组成，js后缀的是脚本文件，json后缀的文件是配置文件，wxss后缀的是样式表文件，必须放在项目的根目录。appjs是小程序的脚本代码（必须），可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的API。

appjson是对整个小程序的全局配置（必须），用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。微信小程序中的每一个页面的路径+页面名都需要写在appjson的pages中，且pages中的第一个页面是小程序的首页。

appwxss是整个小程序的公共样式表（非必须）。

（2）page是用来描述页面，一个页面由四个文件组成，这里以首页index为例，每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：indexjs、indexwxml、indexwxss、indexjson。js后缀的文件是脚本文件，json后缀的文件是配置文件，wxss后缀的是样式表文件，wxml后缀的文件是页面结构文件。indexjs是页面的脚本文件（必须），在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

indexwxml是页面结构文件（必须）。

indexwxss是页面样式表文件（非必须），当有页面样式表时，页面的样式表中的样式规则会层叠覆盖appwxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用appwxss中指定的样式规则。

indexjson是页面配置文件（非必须），当有页面的配置文件时，配置项在该页面会覆盖appjson的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用appjson中的默认配置。这里无需指定。Tips：a为了方便开发者减少配置项，小程序规定描述页面的这四个文件必须具有相同的路径与文件名b小程序提供了丰富的API，可以根据自己需求选择（/debug/wxadoc/dev/api/t=201715）

四、测试小程序实例

1打开微信web开发者工具，选择“本地小程序项目”。2填写小程序的AppID，项目名称，选择第三步写好的小程序实例文件夹，点击“添加项目”。3如果出现如下效果，那么恭喜你，你的第一个小程序项目已经编写成功了！点击左侧边栏“编辑”，还可以在右侧编辑窗口直接对代码进行修改，保存（CTRL+S）后刷新（F5）即可生效。

4如果想看小程序项目在手机上的效果，点击左侧边栏“项目”，点击“预览”生成二维码，打开微信扫描，就可以看到了。

一、小程序和APP有什么区别

商机，我觉得小程序或是APP都需要一个好的点子超强的执行力运气，但是小程序在微信中更易传播、用户进入门槛更低。

只要小程序有意思、有新意很有可能能获取井喷式的用户增长，比如之前的朋友印象、工具类的传图识字等等。

区别的话主要是：

APP：可无限拓展，较高的自由度，适用于一些功能复杂、对交互、设计有要求的应用，用户可更加方便的长期使用

微信小程序：触手可及，用完即走，开发较为简单，但必须依赖于微信很难进行扩展延伸，即功能受限于微信提供的接口，适用于功能单一、低频的应用

如果细分的话也可以从以下几点来说

1、起源

APP：全称为移动应用程序（mobileapplication），是设计给只能手机、平板电脑等设备运行的一种应用程序，目前主流的移动设备操作系统为Android和iOS，距离2018年发布已超过十年。

微信小程序：是一种不需要下载安装即可使用的应用，用户通过微信扫一扫或搜一搜即可打开，2017年1月正式上线。

2、用户群体

APP：面对所有智能手机用户，2017年智能手机用户为26亿。

微信小程序：面对所有微信用户，微信日活超过8亿。

3、使用

APP：固定在桌面上，随时可用

微信小程序：按照最近使用时间倒序排列，使用时需进行扫码/查找

4、下载

APP：需要从应用商店下载所对应的安装包，才可使用

微信小程序：通过微信扫描二维码/扫面小程序码/搜索即可进入小程序直接使用

5、功能

APP：可实现较为完整的功能

微信小程序：因受限于平台仅可实现部分功能，一般小程序功能都较为单一

6、适配

APP：需要针对不同手机进行适配

微信小程序：一次开发可适配所有手机

7、开发周期

APP：开发成本高，开发周期较长

微信小程序：开发成本低，平台已提供较多的接口供使用，开发周期短

8、市场

APP：中国2017年上线APP为500万左右

微信小程序：上线小程序数量58万

二，小程序是如何做出来的，下面我们来看看小程序如何制作。

方法1、微信官方简易教程

我们先来看看微信官网给出的简易教程。

起步基础，注册小程序帐号之后，需要安装开发工具，然后在官方开发工具里面输入代码制作。

基础代码构成：

JSON配置：

我们可以看到在项目的根目录有一个appjson和projectconfigjson，此外在pages/logs目录下还有一个logsjson，我们依次来说明一下他们的用途。小程序配置appjson，appjson是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等

WXML模板：

从事过网页编程的人知道，网页编程采用的是HTMLCSSJS这样的组合，其中HTML是用来描述当前这个页面的结构，CSS用来描述页面的样子，JS通常是用来处理这个页面和用户的交互。

WXSS样式：

WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改。新增了尺寸单位。在写CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。提供了全局的样式和局部样式。和前边appjson,pagejson的概念相同，你可以写一个appwxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式pagewxss仅对当前页面生效。此外WXSS仅支持部分CSS选择器

JS交互逻辑：

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写JS脚本文件来处理用户的操作。

嗯，上面是官方定义的“简易教程”基础中一小部分，对的，简易教程，“简易”。介绍到这里我已经感觉不到所谓的“简易”二字了。

做完基础还有更高级篇等着你，框架，组件，API，工具。这几个词看着简单，展开的内容足够写几本教科书了。

第二种方法第三方平台开发小程序

官方教程定义是否简易我们就不做文章解析了，对于一个商家和企业，我做个小程序还需要了解如此多的代码知识。或者有人说，我可以请个程序猿和设计狮，可以，土豪请随意，但是一个程序猿也需要花时间去敲代码，设计。这一整套制作下来，聪明的人少则一两个月，多着半年，甚至几年都没学会的。

在目前竞争如此激烈的社会，我们企业和商家讲究的都是时间就是金钱，同行竞争，抢占先机。你还会愿意花这么多时间去学习，敲代码，甚至请人提高成本吗？我想你们的回答都是，否。

那么那有没有办法可以让我们轻松且快速地制作小程序呢？

当然有！

我们只需要用到「速成应用」小程序可视化制作工具，马上就可以制作出好看的多功能的全行业的小程序，轻松应对各行各业的应用场景。

下面我们看看如何无需代码基础，轻轻松松制作小程序，教你搞定小程序制作！

小程序可视化制作工具的装修界面，可以清晰的看到左边有“页面、组件、模块、模版”等功能。中间是可视化设计界面，右边是设置。

1、组件

组件功能里面可以添加文字、、视频、文章和和商品列表等元素，都可以自定义样式，大小，边框、背景、颜色、阴影，圆角，透明度效果等等功能，还有幻灯轮播效果。

2、模块

模块库里有适应全行业场景现成的组件模块，幻灯轮播类、导航栏目类、商品展示类、图文展示类、纯文字类、创意图文类、元素图标类、商品列表，精美标题类等等，用户可以一键添加模块布局页面，组件内容均可自定义，无需重新设计排版，模块组件多，适应性高，拖一拖拽一拽，即可完成，自由组合搭配，真正做到千人千店。

3、模板

模板库里有适应全行业场景现成的模板，用户可以一键添加使用布局页面，模板上的内容均可自定义，都可重新设计排版自定义，模板多，适应性高，一键生成，制作小程序就是，快人一步。

如果使用模板功能，一键生成制作使用，花点就制作一个小程序了，是不是很方便。

最后，我想说的是，用对一个工具，选对一种方法，远远比重复的操作来得高效

随着小程序的发展，小程序一天比一天火爆，但你们有没有想过，为什么这么多人使用它呢？因为它不需要下载和安装就可以使用，它实现了应用“触手可及“的梦想，每位用户只需要抬手扫一扫或搜一搜即可打开应用。那么这么轻便的小程序该如何去制作呢？我们今天就以商城类小程序为例为大家讲解讲解！

制作为微信商城小程序之前，我们先来了解一下什么是微信商城小程序？

微信小程序商城是指基于微信小程序开发的商城系统。微信商城最早是基于微信订阅号或服务号（以服务号最为常见）搭建的商城系统，包括自主开发或授权使用第三方微商城两种方式，是商家基于微信公众平台实现粉丝积累和营销推广的重要方式。

了解完之后，我们就来谈谈微信商城小程序到底该怎么制作？

1、注册一个微信小程序

你可以通过

2、申请认证微信小程序以及微信支付

认证是这一环节是最繁琐的，必须通过微信认证验证是否是主体身份（不是本人身份则会申请失败）。已认证的账号是可以使用微信支付、微信卡券等权限的。

3、获取AppID创建项目及部署

以上注册完之后微信官方就会发送一个

AppID给你。创建项目之前需要下载开发者工具，然后创建项目和项目部署。※注意：所创建的项目不能触犯微信的相关法定，如有触犯，审核将不会通过！在此可以借助使用微信小程序开发文档;来帮助开发。

4、商城小程序的审核

小程序开发完成后，需要通过微信进行审核，审核通过后方可使用。

5、商城小程序的推广以及运营

张小龙说：“未来，搜一搜将是小程序最大的入口。一个好的名字，一个符合用户搜索习惯的词带来的流量是无法预估的。”所以说用一个好的名字来推广商城小程序是至关重要的，一个好的名字可以让用户进店浏览率翻翻。线下可以派发一些传单或举办一些活动的方式来推广自己的小程序，这也是最简单最粗暴的方法了！

运营：小程序“无需安装，用完即走”，想要留住用户就要让用户感受到小程序的价值，能让用户有更好的体验！

微信小程序的制作步骤：

1 下载并安装微信开发者工具

微信开发者工具是微信小程序开发的专用工具，可以在官方网站上免费下载，并按照提示安装即可。

2 创建小程序项目

在微信开发者工具中，选择“小程序项目”，填写项目的名称、AppID等基本信息，选择项目存放的路径后，即可创建一个新的小程序项目。（想做小程序可以在榕诗科技看看哦）

3 编写代码

微信小程序主要使用JavaScript语言开发，需搭配使用WXML（微信小程序页面结构语言）和WXSS（微信小程序页面样式语言）来完成页面的布局和样式设计等工作。在微信开发者工具中，打开新建的项目文件夹，找到“pages”文件夹，在其中创建自己需要的页面，并用以上语言完成编写。

4 调试和预览

编写完毕后，可以在微信开发者工具中选择“预览”按钮，即可预览自己的小程序页面，也可以进行调试，查看小程序在不同手机、不同网络环境下的运行情况。

5 提交审核

完成编写、调试和预览后，可以选择“上传”按钮，将自己的小程序提交到微信小程序平台，并填写基本信息和审核要求等。然后，等待微信小程序官方的审核和发布，即可正式上线自己的小程序了。

一、微信小程序官方开发工具

注意，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。小程序开发底价

二、即速应用

即速应用是起步较早、使用量较多、比较成熟的平台。大概是比较有钱，所以到处都能看到他们的广告，有时候我在百度中输入和小程序不相关的词，也会弹出即速应用的广告。在即速应用这个平台上画界面很容易，可以不怎么需要代码的功底。从组件界面来看，给用户的选择还是蛮多，但是模板比较固化，不能做太多修改定制。有些组件是VIP和SVIP级别的用户才能使用，也就是要收费。

三、Sublime Text 3

sublime text 3定位于代码编辑器而不是IDE，在代码提示方面只能算一般般，不过胜在使用起来非常方便。

四、WebStorm

WebStorm网上有个插件，可以实现代码提示，不能做调试和预览，

想要了解更多有关小程序开发的相关信息，推荐咨询猪八戒网。猪八戒网成立于2006年，是中国领先的企业服务平台，服务交易独角兽企业。猪八戒网现有注册用户2800万、在全国布局线下数字化创业园区超过100个。十余年来，累计有10万余个人通过平台孵化成长为公司，超过100万人通过平台实现灵活就业，千万企业通过平台解决专业服务需求；专业性值得选择。