微信开发者工具对接小程序前端教程【通用模块】

教程以柚子黑卡为列,其他大部分模块都是通用,个别如人人商城等有对应的教程

一、准备资料

确保你已经已经安装好框架

确保你的微擎站点已经开启了https,确保你已有认证小程序,如果没有,请前往mp.weixin.qq.com注册

二、安装模块

1.首先将源码下载到本地电脑中,解压出来,然后将mzhk_sun文件夹打包并上传至你的微擎站点addons文件夹内,并解压

  1. 进入你的微擎后台,系统–小程序应用–未安装应用–安装

微信开发者工具对接小程序前端教程【通用模块】插图

微信开发者工具对接小程序前端教程【通用模块】插图(2)

三、小程序对接

1.mp.weixin.qq.com将小程序基础信息先设置好,如小程序名称、介绍、类目

  1. 微擎后台–系统–微信小程序–添加小程序–手动添加小程序–新建小程序

微信开发者工具对接小程序前端教程【通用模块】插图(4)

微信开发者工具对接小程序前端教程【通用模块】插图(6)

微信开发者工具对接小程序前端教程【通用模块】插图(8)

接上方,设置小程序信息,然后选择“柚子黑卡”模块,生成版本

【注意:各项数据一定要准确无误,否则后续你可能调试不出来】

微信开发者工具对接小程序前端教程【通用模块】插图(10)

微信开发者工具对接小程序前端教程【通用模块】插图(12)

微信开发者工具对接小程序前端教程【通用模块】插图(14)

9-3

微信开发者工具对接小程序前端教程【通用模块】插图(18)

这里我们先不进去管理,我们先完整对接小程序,还有下面的步骤

微信开发者工具对接小程序前端教程【通用模块】插图(20)

点击“基础信息”进入,将这里的信息一服务器配置信息、消息推送配置信息复制填写到小程序后台对应的地方

微信开发者工具对接小程序前端教程【通用模块】插图(22)

如下图,是小程序要设置的,左侧菜单–设置–开发设置

微信开发者工具对接小程序前端教程【通用模块】插图(24)

微信开发者工具对接小程序前端教程【通用模块】插图(26)

微信开发者工具对接小程序前端教程【通用模块】插图(28)

四、模块设置

这里只讲下设置简单的以便后面的小程序前端对接,剩下的设置需要自己一一去添加内容什么的了,这些没有教程可写的

1.系统设置–小程序设置–信息填写你自己的,这里必须填写正确,否则是一定对接不成功的

微信开发者工具对接小程序前端教程【通用模块】插图(30)

  1. 我们添加个轮播图方便等下对接的时候简单看下效果,剩下的设置就你们慢慢按照自己需求一一填写了

微信开发者工具对接小程序前端教程【通用模块】插图(32)

五、开发者工具对接小程序前端

微信开发者工具下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  1. 电脑桌面新建个文件夹(最好英文命名,如我的命名youzi)

微信开发者工具对接小程序前端教程【通用模块】插图(34)

2.新建小程序,这里千万要注意,appid一定要正确,且选择 建立普通快速启动模板

新版的默认会选择 建立云开发快速启动模板 坑。我们选择 普通快速启动模板,否则是对接不上的

微信开发者工具对接小程序前端教程【通用模块】插图(36)

3.用柚子黑卡的前端文件(我们下载的源码里面wxapp这个文件夹),将wxapp文件夹内所有文件复制到youzi这个文件夹覆盖(就是我们创建小程序的那个文件夹)

4.开发者工具,点击siteinfo.js文件,然后修改id和网址,修改为自己的

id获取方法,微擎后台,系统–微信小程序–对应小程序–基础信息–浏览器中的链接中的uniacid=4&acid=4

其中4 这个数字就是id,当然这是我的,你们的要看你们的链接中的id是多少

然后ctrl+S保存,清缓存,编译。如下图,界面出来了。

微信开发者工具对接小程序前端教程【通用模块】插图(38)

但是这里我们发现并不对应啊,那么我们去后台检查下设置

原来是过审开关开启了,我们把他关闭下,在回到开发者工具,点击编译(相当于刷新吧),如图,这就正确了

微信开发者工具对接小程序前端教程【通用模块】插图(40)

注意事项:如果你配置都正确,没调试出界面的话,请检查下appid和密匙是否正确,

如果报错全是127.0.0.1一堆字样,请更新你开发者工具版本,或者重启开发者工具。

六、小程序预览和上传、提交审核、上线发布

1.开发者工具,点击预览会生成二维码,用微信扫码可体验

2.开发者工具,点击上传,提交版本

3.登陆微信小程序后台,提交审核,按步骤要求提交即可

4.待腾讯爷爷审核通过后,再去微信小程序后台提交上线发布

七、小程序怎么更新?

将后端文件上传至addons文件夹,微擎后台,系统–小程序应用–已安装应用–应用会提示升级

然后,我们进入对应的小程序,新增一个版本

前端文件再用开发者工具重新对接一次,上传提交审核,发布

 

陕蓝记录,一个只记录优质资源的源码分享站!
陕蓝记录|云资源分享站 » 微信开发者工具对接小程序前端教程【通用模块】

专业的网站关键词快速提升、SEO排名优化软件

立即下载 了解详情