店长宝微信小程序后台功能简介(三)——小程序制作
继续为大家介绍店长宝微信小程序的后台功能,今天介绍后台中的小程序制作功能。
小程序制作功能:小程序发布、模板市场、万能页面、支付配置、生成模板等五个小功能。
1、小程序发布
一、点击小程序发布,扫描二维码即可将小程序授权给本平台;
![](https://img.haomeiwen.com/i7881192/600472a2619b5267.png)
二、授权成功后将进入如下页面:
![](https://img.haomeiwen.com/i7881192/49bc49369fa3f2bd.png)
![](https://img.haomeiwen.com/i7881192/a9db514879ad512c.png)
(1)正上方分别是小程序体验二维码和正式二维码;
(2)右上角可添加小程序体验者;
(3)小程序开发完成后需点击一键上传代码;
(4)点击提交审核可将已经上传的小程序代码提交给微信官方审核;
(5)点击立即发布可将最近一个通过审核的小程序发布上线;
(6)重新授权在授权丢失后使用(一般不要使用);
(7)取消授权后,小程序将解除与本平台的绑定,小程序功能全部丢失(不要使用);
小程序制作中小程序业务域名功能
![](https://img.haomeiwen.com/i7881192/52a57a789048e200.png)
![](https://img.haomeiwen.com/i7881192/794768679157ad9f.png)
由于微信开放平台业务域名验证功能是近期增加的,所以早期绑定微信开放平台的默认没有这个功能。如需正常使用此功能,在微信开放平台修改,增加业务域名验证即可。
2、模板市场
![](https://img.haomeiwen.com/i7881192/3d280a7078a75df4.png)
(1)模板市场为大家提供了丰富的小程序模板,可点击分类筛选自己想要的小程序模板;
(2)点击立即使用模板后会立即进入小程序装修页面并在下程序制作-万能页面处新生成一条页面信息:
(3)如果是第一次使用平台,使用模板后系统会将此模板自动设为首页,如果不是第一次使用,需要手动将此页面设为首页,方可同步为线上版本(简而言之,设为首页的即为小程序线上显示版本)。
3、万能页面
一、页面管理
功能简介:页面即为小程序页面,在万能页面这里,可以新建多个小程序页面
使用说明:
(1)输入页面名称,页面描述,点击下一步即可成功建立小程序页面;
(2)设为首页:
A、首次新建的页面将自动设为首页(首页页面左边有红色小房子标识);
B、设为首页的页面将只有小程序装修菜单(没有设为首页和删除,设为首页的页面不可删除);
![](https://img.haomeiwen.com/i7881192/77cfb5dde2651ba7.png)
C、小程序设为首页后将及时同步为线上版本;
二、小程序装修
功能简介:小程序装修即通过组件拖拽的方式对小程序进行装修设计工作;
注意事项:
(1)如装修页面拖拽没反应,系网络问题,刷新页面即可;
(2)小程序拖拽装修对浏览器要求较高,必须使用谷歌内核浏览器(支持:谷歌,搜狗,火狐,2345浏览器;不支持:360,IE等低内核浏览器);
(3)丰富组件:系统提供了近30多种丰富的组件,可满足各行业小程序设计要求,更多组件,不断开发中;
(4)每种组件的详细使用方法参见:小程序组件使用教程详解。
![](https://img.haomeiwen.com/i7881192/507a0b60899151ef.png)
![](https://img.haomeiwen.com/i7881192/4d431c13da27f7b4.png)
![](https://img.haomeiwen.com/i7881192/f1cefc4a8dfc0480.png)
三、小程序菜单
①新版菜单设置在:小程序制作-万能页面-小程序装修-中间手机框底部
②新版系统小程序菜单可突破官方诸多限制,实现以下突出特性:
(1)旧版小程序菜单每次修改都要重新下载发布,操作很麻烦,新版菜单无论修改任何内容(图片,文字,链接)都会在小程序端同步生效;
(2)新版菜单突破链接不能带参数的限制,可实现任意链接,一键导航,一键拨号,小程序内页等丰富功能,操作方便,功能应有尽有。
③小程序菜单使用教程:
(1)在 小程序制作-万能页面-小程序装修-中间手机框底部找到菜单并点击,右侧会出现菜单编辑框,系统默认显示(首页,分类,购物车,我的)四个菜单,可在右侧编辑框进行修改;
![](https://img.haomeiwen.com/i7881192/065e92d7eb1312c4.png)
(2)右侧顶部为小程序主题颜色设置(含小程序选中文字颜色和小程序顶部标题颜色),随意选一种颜色即可(必须选择,如不选,小程序端则会报错),如果需要更多配色,在底部自定义颜色处写上颜色代码即可;
![](https://img.haomeiwen.com/i7881192/e025dd6e8398e6ad.png)
(3)右侧中间部分为小程序图标设置,菜单名称设置和菜单跳转链接设置:
点击图标可修改图片(后期我们将提供图标库,可直接选择使用),在名称处可修改菜单名称,点击选择链接可在功能库选择任意想要跳转的链接。
![](https://img.haomeiwen.com/i7881192/41293183fedfcc8e.png)
四、小程序组件使用教程详解
组件使用方法:
(1)将左侧组件库中的组件拖拽到中间手机框即可(如拖拽没反应,刷新当前页面即可);
(2)商品,文章,预约,门店,电话,拼团,秒杀组件需要在左侧对应导航菜单添加相应功能设置后方可使用,其他组件直接在最右侧配置相关信息,保存后即可生效;
(3)新版图片类组件高度均已实现自适应(除三四方图),可尽情使用。
![](https://img.haomeiwen.com/i7881192/434894178854a389.png)
组件使用教程:
(1)幻灯片组件:自带四种幻灯片样式任意选择,最多可加十张幻灯片,拖拽可实现排序,点击图片可对图片进行修改,点击选择链接可添加功能库中自己想要的链接,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/2d48f123504aca91.png)
(2)功能区组件:自带三种功能区样式,可添加数十种导航,拖拽可自由排序,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/67f505142aa9c95b.png)
(3)导航组件:使用次数最多的组件,点击图标可进行图标修改,默认一排四个,可添加多个导航,点击选择链接可添加功能库中自己想要的链接,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/82873755c5fe2b9a.png)
(4)商品组件:商城类功能必备组件,贴心设计,自带五种丰富样式自由选择,选择商品时可使用自动选择模式或手动选择,自由设置商品显示数量。(PS:使用商品组件需先在系统后台左侧导航-商城系统处先添加商品分类和商品,不添加显示默认数据),设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/44b8ef423cef5c9c.png)
(5)文章组件:资讯新闻文章类功能必备组件,贴心设计,自带四种丰富样式自由选择,选择文章时可使用自动选择模式或手动选择,自由设置文章显示数量。(PS:使用文章组件需先在系统后台左侧导航处先添加文章分类和文章,不添加显示默认数据),设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/94c308aef94d5d6a.png)
(6)标题栏组件:自带五种丰富标题样式自由选择,设置好保存后小程序端立即同步生效。(PS:标题链接名称不设置将显示null)
![](https://img.haomeiwen.com/i7881192/b34d06159f5a24bc.png)
(7)搜索组件:自带三种搜索样式自由选择,设置好保存后小程序端立即同步生效。
(8)文本组件:输入文本保存后小程序端立即同步生效。(PS:文本可换行)
(9)分隔符组件:自带三种分隔符样式自由选择,选择好保存后小程序端立即同步生效。
(10)图文组件:自带四种图文样式自由选择,图片可自由修改,图片链接可选择功能库中链接,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/aa21fe7f05104eb7.png)
(11)单图组件:使用次数最多的组件,图片随意设置,图片链接任意选择图片高度可实现自适应,只要有好的美工设计,就可以依托本模块设计出精美的小程序,支持功能库所有链接,设置好保存后小程序端立即同步生效。
(12)双图组件:增加设计展示的多样性,支持功能库所有链接,功能细节类似单独组件,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/666a31c07f6e1190.png)
(13)四图组件:增加设计展示的多样性,支持功能库所有链接,功能细节类似单独组件,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/53578b750e1356fe.png)
(14)三横图组件:可做三图,六图,九图(九宫格),十二图等多种用途,支持功能库所有链接,功能细节类似单独组件,设置好保存后小程序端立即同步生效。
(15)四横图组件:可做四图,八图,十二图,十六图等多种用途,支持功能库所有链接,功能细节类似单独组件,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/8b953ddd04f37f1b.png)
(16)预约组件:预约预定类功能必备组件,贴心设计,自带两种预约样式自由选择,选择预约时可使用自动选择模式或手动选择,自由设置预约显示数量。(PS:使用预约组件需先在系统后台左侧导航处先添加预约分类,服务项目,服务人员等信息,不添加显示默认数据),设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/4317bc53277295ad.png)
(17)视频组件:使用本组件可在小程序中实现视频功能,设置预览图,填入小程序网址即可,设置好保存后小程序端立即同步生效。说明:根据微信官方要求,视频地址必须为绝对地址。
①可获取腾讯视频的绝对地址填入;
②可将视频传到七牛等平台获取绝对地址填入;
③视频名称不可为中文。
![](https://img.haomeiwen.com/i7881192/116dccec63dfb0d7.png)
(18)地图组件:使用本组件可在小程序中实现地图功能,在下图坐标选择处输入详细的地址,点击搜索,之后用鼠标移动蓝色小图标即可获得经纬度信息,点击保存,小程序端即可同步生效。
PS:输入地址搜索后必须移动蓝色小图标,否则经纬度信息将不显示,保存后小程序端地图也将不显示。
![](https://img.haomeiwen.com/i7881192/537d20343852106e.png)
(19)公告组件:使用本组件可在小程序中实现公告功能,点击选择图片可修改图标,文字部分可输入公告文字内容,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/9f5a8aac2b609cfe.png)
(20)三方图组件:增加小程序设计展示的多样性,不支持(功能库中的一键拨号,一键导航,小程序跳转,内嵌网页功能),图片大小必须按系统指定尺寸设计,设置好保存后小程序端立即同步生效。
PS:本功能删除功能不易看见,鼠标移动到上方蓝色(2:1)部分可看到。
![](https://img.haomeiwen.com/i7881192/2c011f1e95f7858b.png)
(21)四方图组件:增加小程序设计展示的多样性,不支持(功能库中的一键拨号,一键导航,小程序跳转,内嵌网页功能),图片大小必须按系统指定尺寸设计,设置好保存后小程序端立即同步生效。
(22)留言组件:组件拖进去即可使用,无需设置,留言信息在左侧菜单-留言反馈处查看,设置好保存后小程序端立即同步生效。
(23)门店组件:将组件拖进手机框,在后台菜单-小程序设置-门店管理处添加商品,此处每个组件可选择一个门店链接,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/5e879531da731e71.png)
(24)富文本组件:我们的系统率先支持富文本组件,这是一个极为重要的组件。可以在此处添加任意图片,文字,表情等,实现对文字的加粗,居住,换行等丰富功能。功能接近传统编辑器,是小程序中的一项神器功能。使用富文本可设计出精美度更高的小程序,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/6cc4b2a88bd919e5.png)
(25)客服组件:将组件拖进手机框即可悬浮显示,可修改背景颜色和图标颜色,无需其他设置即可正常使用,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/72965330e0e2a31e.png)
(26)电话组件:将组件拖进手机框即可悬浮显示,可修改背景颜色和图标颜色,设置手机号码保存后即可正常使用,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/c78d41aeb797638e.png)
(27)拼团组件:将组件拖进手机框,在后台菜单-营销活动-拼团商品处添加商品,此处每个组件可选择一个拼团商品,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/5cb15d91f17e8116.png)
(28)秒杀组件:将组件拖进手机框,在后台菜单-营销活动-秒杀商品处添加商品,此处每个组件可选择一个秒杀商品,设置好保存后小程序端立即同步生效。
![](https://img.haomeiwen.com/i7881192/51974744317c39a4.png)
五、功能库链接使用教程详解
![](https://img.haomeiwen.com/i7881192/7cb9465dbb910567.png)
如上图,功能库链接共有十一种大分类,若干小分类,在小程序组件(或菜单)中可选择本功能库中的链接。
(1)功能链接:即常用链接,按需选择使用即可
(2)分类链接:即商品分类链接
(3)分组链接:即商品分组链接
(4)文章分类:即文章分类链接
(5)商品链接:即单个商品链接
(6)文章链接:即单篇文章链接
(7)预约分类:即预约分类链接
(8)预约信息:即预约详细链接
(9)页面链接:即小程序页面链接,按需选择使用即可(重要)
(10)小程序列表:关联小程序跳转功能,选择可实现小程序相互跳转
(11)网页列表:关联内嵌网页功能,设置好业务域名后,选择可实现小程序跳转到单独的网页链接
4、在线支付配置
1.正确填写各项配置即可,无需其他设置,小程序即可正常支付;
2.小程序Appid和APPsecret和小程序手动下载模式关联,如果需要使用手动下载模式,此项必须正确配置,如果不需要,无需设置;
3.如果不需要支付信息最后四项可不用设置;
4.如不需退款,最后两项证书无需上传;
![](https://img.haomeiwen.com/i7881192/045110c21d583c89.png)
5、手动下载
手动下载相比在线绑定发布的优势是:手动下载可以修改小程序代码,以满足更丰富的需求。
(1)点击打包下载即可将完整的小程序代码包下载到本地;
![](https://img.haomeiwen.com/i7881192/5c52417153dc9527.png)
(2)使用开发者工具上传小程序即可;
(3)小程序开发工具最新版下载:
①安装后图标:
![](https://img.haomeiwen.com/i7881192/011e35525c4f4462.png)
登录,用自己的微信号,扫描后即可登录
②一定要正确填写Appid,不要选无appid
注意,假如看不到效果,或者跳出这个错误
![](https://img.haomeiwen.com/i7881192/eb792909fbd8ad80.png)
有可能是项目目录选择错误了,要选择含以下文件的目录
![](https://img.haomeiwen.com/i7881192/49afe3d0f863a237.png)
③项目目录选择刚下载打包的目录,点击添加项目,即可看到项目;
(如果提示无权限,需要先到微信公众小程序后台添加开发者)
④如果进去一直显示加载中,问题为未设置小程序域名,设置以后点击顶部的 设置-项目设置-域名信息可检查域名是否在列表中
(设置以后重新进去或刷新)
![](https://img.haomeiwen.com/i7881192/084a2ca8bf97b504.png)
⑤点预览,可生成二维码在手机上查看
![](https://img.haomeiwen.com/i7881192/72ebb8bccfc337c3.png)
⑥开发完成以后,如果确定要上线,点击上传
⑦上传以后点 开发管理,会显示待发布版本,发布即可(需正确填写经营范围,否则会审核失败)
![](https://img.haomeiwen.com/i7881192/3ce41685fada1e52.png)
![](https://img.haomeiwen.com/i7881192/d60bfe2834a785b1.png)
⑧至此,小程序顺利发布完成。
6、生成模板
(1)使用本功能可将设置好的小程序页面生成模板,提供给其他用户使用;
(2)使用本功能可实现小程序克隆(即如果有一个设计好的小程序,可快速设计一个一模一样的小程序),使用方法为:将设计好的小程序页面生成模板,在另一个用户账号中选择刚生成的模板即可。
![](https://img.haomeiwen.com/i7881192/5109ba9cf4e4126d.png)
以上由店长宝小程序提供总结,小程序对于用户最大的优势在于无需安装,用完即走,节省手机内存。
我是淘小咖,一个专注于互联网项目的写手,如果你还在寻找项目,那么请联系我了解店长宝小程序吧!