手把手教你制做微信小程序，开源、免费、快速搞定

最近作了个“罗孚传车”的小程序

一时兴起，作了一个小程序，将我的收集的同汽车相关的行业资讯和学习资料，分享到小程序中，既做为历史资料保存，又提供给更多的人学习和了解，还能装一下:)

扫描下方小程序码能够体验一下

主页面：

文章页：

我的页：

关于页：

固然，还和个人公众号罗孚传说关联了：

为何要作微信小程序？

一、微信中常常收到一些不错的文章，我想保存并整理，同时还能分享给别人看。

二、作一个微信小程序其实不难，但能够装装装(你懂的)。

怎么作微信小程序？

简单的来讲：WordPress+开源程序，一切免费，而且能快速搞定。

原理是：经过WordPress插件生成REST API数据，而后小程序端组织呈现。

我用的是“守望轩”提供的整套方案，WordPress端安装wp-rest-api-for-app插件，小程序端使用winxin-app-watch-life.net代码。

一步一步开始制做小程序

一、配置SSL，让网站支持HTTPS

因为小程序须要HTTPS支持，因此你必须创建一个可以HTTPS访问的网站。

若是你使用阿里云主机，那么能够免费得到SSL证书，是由Symantec提供的DV SSL证书。

PS：若是没有找到上述免费DV SSL证书，那么选择Symantec品牌后，在证书类型中先选择加强型证书试试，应该会跳出免费证书。

固然，其余平台也是能够免费得到SSL证书的，Symantec的免费证书很通用，若是云服务商不支持，那也能够选用Let’s Encrypt提供的免费证书，自行研究一下吧。

除了得到证书外，还须要在服务器上安装证书，安装方法再也不赘述，百度一下试试。

特别强调：HTTPS是小程序的必须步骤，若是你没法搞定HTTPS，那么没法创建小程序。

二、安装WordPress和插件

下载WordPress并安装，如今版本都已是4.9以上了，不要搞出一个很旧的版原本哦。

一个建议：因为网站已经支持HTTPS，因此建议默认网站设置为HTTPS访问，大势所趋。

再下载wp-rest-api-for-app插件，从GitHub上下载下来的zip文件直接可用。

在WordPress的插件功能下，使用上传文件的方式安装该插件，安装完成启用便可。

三、申请小程序，并配置

这里申请我的小程序应该也是能够的，就是没法使用微信支付等功能，若是能用企业申请小程序固然更好了。

至于小程序是否进行认证，不认证也不影响使用，惟独微信支付没法开通罢了，若是你不差300元，那认证一下也无妨。

申请完成，填写小程序的相关信息，名称、头像等，接下来在开发设置中设置服务器域名。域名默认HTTPS开头，不支持HTTP。

配置完域名，回到WordPress中配置插件，进入设置中的“微信小程序设置”。

AppID和AppSecret均可以在微信的开发设置中得到。

除了插件设置外，建议对分类目录增长图片，在文章的分类目录中有微信小程序封面设置。

四、下载并修改小程序代码

下载winxin-app-watch-life.net代码，导入到微信开发者工具中。

修改utils目录下的config.js文件

var DOMAIN = "your-site-name.com";//配置域名
var MINAPPTYPE="0";//小程序的类型，若是是企业小程序请填：0 ，若是是我的小程序请填：1
var WEBSITENAME="罗孚传车"; //网站名称
var ABOUTID = 2; //wordpress网站"页面"的id,注意这个"页面"是wordpress的"页面"，不是"文章"
var PAGECOUNT='10'; //每页文章数目
var CATEGORIESID='all' //专题页显示所有的分类
//var CATEGORIESID = '1,1059,98,416,189,374,6,463';//指定专题页显示的分类的id
var INDEXLISTTYPE="all" //首页显示全部分类
//var INDEXLISTTYPE ="1" //指定首页显示分类的id
var PAYTEMPPLATEID = 't1YE-N';//赞扬消息模版id
var REPLAYTEMPPLATEID = 'c_Ni2';//回复评论消息模版id
var ZANIMAGEURL = '../../images/qrcode';//微信赞扬的图片连接，用于我的小程序的赞扬
var LOGO = "../../images/logo-icon.png"; // 网站的logo图片
var POSTERIMGURL ="../../images/logo700.png"; //生成海报若是没有首图，使用此处设置的图片做为海报图片。
//设置downloadFile合法域名,不带https ,在中括号([])里增长域名，格式：{id=,domain:'www..com'}，用英文逗号分隔。
//此处设置的域名和小程序与小程序后台设置的downloadFile合法域名要一致。
var DOWNLOADFILEDOMAIN = [
{ id: 1, domain: 'your-site-name.com' }]

除了config文件的修改，程序中的页面名称等内容也须要修改，自行查找修改便可。

修改完后即时预览，差很少了就能够上传代码啦。

至此，你的小程序就算完成啦，赶快预览一下吧。

是否是以为内容有点少？教你一招：一小时内更新100篇文章！

好了，作小程序就这么简单，如今，你是否是也准备跃跃欲试小程序了呢？