微信小程序制作流程

提前想好小程序做什么、用什么名字、头像等；注册微信平台账号，选择小程序；确定行业，准备好营业执照这些，个人的话就不用了；这些都确定了之后，就可以在制作对应行业的小程序，一般1-2天吧，就能做出来了

1、小程序的名称只支持中文、英文、数字和加号，长度为3-20个字符，加号只能放在小程序名称的末端;小程序名称一旦确定，目前是不能作出修改的;

2、微信小程序的头像和介绍不得涉及任何政治敏感和色情的内容，头像和介绍每个月均可更改5次，服务范围每月只能修改1次;

3、目前，微信小程序仅支持企业、政府、媒体、其他组织申请，暂时不对个人开放，一个主体可以注册30个微信小程序，一个绑定身份的开发者只能创建5个微信小程序

4、小程序所提供的服务目前暂时不能涉及游戏、直播等服务，内容也不能涉及测试类内容;比如：算命，抽签，星座运势等;微信小程序的服务配置每个月只有3次修改机会;

5、微信小程序的页面设计无需设置一级菜单的导航，微信系统内的所有小程序都自带微信提供的导航栏。

第一步当然是注册账号了。

注册流程：

在微信公众平台右上角点击“立即注册”，选择账号注册类型：小程序。

按要求填写小程序账号信息，包括邮箱、密码等等，填写完后，系统会发送你一个邮件，登陆相应邮箱激活账号即可

激活后，选择好主体类型，个人就选个人，企业会需要提交一些资料。一切做好后，这就注册完成了。

使用小程序账号密码登入小程序后台。在设置里设置小程序的头像、名字、服务类目（这个一定不要乱写）等信息，提交后等待微信审核。

这样，你的小程序账号就注册好了。

第二步，生成小程序

虽然已经有了一个小程序账号，但是还没有一个真正的小程序实体，空有名字，而不知道它到底长什么样子。目前市面有很多第三方小程序开发工具，我们可以用它们来做。这里我以沃然建站平台小程序开发工具为例，给大家示范下如何制作一款自己的小程序

1选择模板首先，挑选一个你喜欢的模板，开始编辑。

2直接点击“添加新的商品”，就可以把自己的产品都上架了。如果商品较多，别忘了在商店设置里设置好商品分类。

3风格设计装修，选择喜欢的主题颜色和导航栏，也可以自定义颜色。

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、模板

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

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

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

import javaapplet;
import javaawt;
import javaawtevent;
public class Tester extends Applet implements ActionListener
{
Button btn1,btn2,btn3,btn4;
public void init(){
setLayout(null);
btn1=new Button("绘制直线");
btn2=new Button("绘制矩形");
btn3=new Button("绘制圆");
add(btn1);
add(btn2);
add(btn3);
btn1setBounds(10, 60, 60, 20);
btn2setBounds(10, 90, 60, 20);
btn3setBounds(10, 120, 60, 20);
btn1addActionListener(this);
btn2addActionListener(this);
btn3addActionListener(this);

validate();
setVisible(true);

}
public void start(){

}
public void actionPerformed(ActionEvent e)
{
Graphics g=thisgetGraphics();
if(egetSource()==btn1)
{
gdrawLine(200, 100, 300, 200);
}
else if(egetSource()==btn2)
{
gdrawRect(200, 250, 200, 200);
}
else
{
gdrawArc(200, 500, 200, 200, 0, 360);
}
}
}

;     给微信上的画圈圈的步骤如下：
      1、打开微信，点击任意好友头像进入聊天界面，随后单击右下角加号，在d出的界面下方点击“相册”。

      2、在d出的相册界面中找到并选中想要画圈发送的，选中以后，点击右下角“预览”。

      3、随后进入图像预览界面，接着选择左下角“编辑”按钮。

      4、在的编辑界面中，会列举出底部5个 *** 作按钮，选择第一个画笔按钮，在上画圈，圈选出要标明的部分，即可完成画圈 *** 作。

      微信(WeChat)是腾讯公司于2011年1月21日推出的一款面向智能终端的即时通讯软件。微信为用户提供聊天、朋友圈、微信支付、公众平台、微信小程序等功能，同时提供城市服务、拦截系统等服务。2012年4月，腾讯公司将微信推向国际市场，更新为“Wechat”。微信由深圳腾讯控股有限公司(TencentHoldingsLimited)于2010年10月筹划启动，由腾讯广州研发中心产品团队打造。该团队经理张小龙所带领的团队曾成功开发过Foxmail、QQ邮箱等互联网项目。腾讯公司总裁马化腾在产品策划的邮件中确定了这款产品的名称叫做“微信”。2015年2月4日，微信团队在其公众平台发布抄袭行为处罚规则：第一次删文并警告、第二次封号7天、第三次封15天、第四次封30天、第五次永久封号。对于不遵守平台规则，乱使用“原创声明”功能的恶意和违规行为，一经发现和被举报，微信公众平台将永久回收其“原创声明”功能，且进行阶段性封号处理。

主要步骤

获取用户头像

模板

合成

一、获取用户头像

制作自定义头像的第一步就是先选择。在海豚趣图的交互设计中，用户有三种选择的方式：微信头像、本地相册和相机拍摄。获取用户头像的产品设计如下图所示：

1、由于微信官方不再支持通过 wxgetUserInfo 接口来获取用户信息，我们必须通过使用 button 组件并将 open-type 指定为 getUserInfo 类型来获取或展示用户信息。

为优化用户体验，使用 wxgetUserInfo 接口直接d出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wxgetUserInfo 接口，将无法d出授权询问框，默认调用失败。正式版暂不受影响。

上图中d出底部菜单的交互方式无法通过 wxshowActionSheet 来实现（因为该接口只能指定字符串文本，不能使用 button, navigator 等组件）。

因此，只能通过自定义 actionSheet 组件来实现以上功能。

mmp-action-sheet 组件

以下是 mmp-action-sheet 组件的代码。

indexwxml

<view hidden="{{!actionShow}}" class="mask {{mask}}" bindtap="actionHide">  <view class="actionSheet animated {{animation}}">
   <slot></slot>
   <button class="close" bindtap="actionHide">{{closeText}}</button>
 </view></view>

2、通过 slot 在 action-sheet 中插入自定义的内容，比如 button、navigator 等。

indexwxss

mask{  position: fixed;  top: 0;  left: 0;  width:100%;  height: 100%;  background: rgba(0, 0, 0, 05);  z-index: 999;
}actionSheet{  width: 100%;  position: absolute;  top: 100%;  z-index: 1000;  overflow: hidden;
}actionSheet button,actionSheet navigator{  color: #000;  text-align: center;  background: #fff;  border-radius: 0;  line-height: 35;  font-size: 32rpx;  border-bottom: 1rpx solid rgb(236, 236, 236);  opacity: 1;
}actionSheet button:active,actionSheet navigator:active{  color:#000;  background: rgb(236, 236, 236);
}actionSheet button::after,actionSheet navigator::after{  border: none;  border-radius: 0;
}actionSheet close{  border-bottom: none;  border-bottom: 50rpx solid #fff;  border-top: 16rpx solid rgb(236, 236, 236);
}animated {  animation-timing-function: ease-out;  animation-duration: 02s;  animation-fill-mode: both;
}@keyframes fadeInBottom {from{   transform: translate3d(0, 0, 0);
}  to {    transform: translate3d(0, -100%, 0);
 }
}fadeInBottom {  animation-name: fadeInBottom;
}@keyframes fadeOutBottom {from{   transform: translate3d(0, -100%, 0);
}  to {    transform: translate3d(0, 0, 0);
 }
}fadeOutBottom {  animation-name: fadeOutBottom;
}@keyframes fadeIn {from{   opacity: 0;
}  to {     opacity: 1;
 }
}fadeIn {  animation-name: fadeIn;
}@keyframes fadeOut {from{   opacity: 1;
}  to {     opacity: 0;
 }
}fadeOut {  animation-name: fadeOut;
}

indexjs

Component({  properties: {    actionSheetStatus: {      type: Boolean,      value: false,
     observer(newVal) {
       if (newVal) {
         thissetData({            actionSheetStatus: true,            animationMask: 'fadeIn',            animationSheet: 'fadeInBottom'
         })
       } else {          thissetData({            actionSheetStatus: false,            animationMask: 'fadeOut',            animationSheet: 'fadeOutBottom'
         })
       }
     }
   },    closeText: {      type: String,      value: '取消'
   }
 },  data: {    animationMask: 'fadeIn',    animationSheet: 'fadeInBottom'
 },  methods: {
   closeActionSheet() {
     thissetData({        animationMask: 'fadeOut',        animationSheet: 'fadeOutBottom'
     })
     setTimeout(() => {
       thissetData({actionSheetStatus: false})
     }, 300)
   }
 }
})

组件只有两个参数：

actionSheetStatus 指定组件的初始展示状态，默认为false，表示不显示组件。

closeText 指定关闭按钮的名字，默认为 取消。

indexjson

{  "component": true,  "usingComponents": {}
}

接下来在页面中调用组件，在组件中插入了3个 button 组件来实现来获取用户头像：

<action-sheet actionSheetStatus="{{actionSheetStatus}}">
   <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">使用微信头像</button>
   <button bindtap="pickPic" data-source-type="album">使用本地相册</button>
   <button bindtap="pickPic" data-source-type="camera">拍照</button>
 </action-sheet>

以上我们通过自定义组件 mmp-action-sheet 就解决了原生的 actionsheet 无法指定 button，从而无法获取用户微信头像的问题。

该组件我已经发布到 npm 包，需要用到的同学可以通过 npm 安装，也可以在 github 上查看源码和使用文档。

二、模板

有了原图，接下来我们需要选择模板。如果模板数量不多或者模板变化不频繁，我们可以直接把模板放在本地。鉴于我提供的模板比较多，放在本地会增大小程序源码的大小，我把模板上传到了小程序的云存储中，通过云函数来动态获取模板，方便以后模板扩展。

云函数 tpl 的代码如下：

// 云函数入口文件const cloud = require('wx-server-sdk')
cloudinit()// 云函数入口函数exportsmain = async (event, context) => {  const wxContext = cloudgetWXContext()  // 1 获取数据库引用
 const db = clouddatabase()  const MAX_LIMIT = 100
 // 2 构造查询语句
 const countResult = await dbcollection('template')count()  const total = countResulttotal  // 计算需分几次取
 const batchTimes = Mathceil(total / 100)  const tasks = []  for (let i = 0; i < batchTimes; i++) {    const promise = dbcollection('template')skip(i MAX_LIMIT)limit(MAX_LIMIT)get()
   taskspush(promise)
 }  return (await Promiseall(tasks))reduce((acc, cur) => {    return {
     data: accdataconcat(curdata),
     errMsg: accerrMsg,
   }
 })
}

页面中调用云函数拉取模板：

getTpl() {    const self = this
   // 调用云函数获取模板
   wxcloudcallFunction({
     name: 'tpl'
   })then(res => {
     selfsetData({
       templates: resresultdata
     })
   })
}

三、问题

到这里模板的获取逻辑已经没有问题了，但在开发过程中遇到了一个问题。模板的链接我使用的是云文件ID，当有大量并行加载的时候，只有部分能够显示，我看了一下dom节点其实都已经存在了，image的src的地址也都是正确的。

1、微信官方自230开始已经支持在image中使用云文件ID。云文件ID的格式为： cloud://xxxxxx/templates/01png。

我猜测可能是对微信云存储并发请求过多导致的（有知道的同学可以告知），因为我试了一下将云文件ID换成正常的>

由此可知，可以想到有三种可行的解决方案：

2、将模板存储到外部OSS，使用>

3、使用 wxgetTempFileURL 用云文件 ID 换取真实链接，也就是>

4、控制图的并行加载数量。我的实践是将并行加载数量控制在20，当用户滚动的时候再发起下一次请求。

---