惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Fortinet All Blogs
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
有赞技术团队
有赞技术团队
www.infosecurity-magazine.com
www.infosecurity-magazine.com
大猫的无限游戏
大猫的无限游戏
爱范儿
爱范儿
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Threatpost
V
Visual Studio Blog
Apple Machine Learning Research
Apple Machine Learning Research
博客园 - Franky
人人都是产品经理
人人都是产品经理
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
The Cloudflare Blog
N
News and Events Feed by Topic
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
酷 壳 – CoolShell
酷 壳 – CoolShell
V
V2EX
AWS News Blog
AWS News Blog
S
SegmentFault 最新的问题
T
Tailwind CSS Blog
Hugging Face - Blog
Hugging Face - Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Spread Privacy
Spread Privacy
J
Java Code Geeks
博客园 - 聂微东
T
Tor Project blog
宝玉的分享
宝玉的分享
博客园 - 叶小钗
Webroot Blog
Webroot Blog
博客园 - 【当耐特】
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
H
Heimdal Security Blog
Y
Y Combinator Blog
T
The Blog of Author Tim Ferriss
MongoDB | Blog
MongoDB | Blog
I
InfoQ
Security Latest
Security Latest
Martin Fowler
Martin Fowler
Hacker News: Ask HN
Hacker News: Ask HN
P
Privacy International News Feed
C
CERT Recently Published Vulnerability Notes
Latest news
Latest news
雷峰网
雷峰网
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Cisco Blogs
H
Help Net Security
L
LINUX DO - 最新话题
L
LINUX DO - 热门话题

博客园 - Rover.Tang

手把手教你快速构建一份全国疫情分布地图 - Rover.Tang - 博客园 商业模式变革造就未来车联网——《车联网技术解构与商业模式分析》笔记 - Rover.Tang - 博客园 随身车联网——车联网生态新物种(附发布会视频) - Rover.Tang - 博客园 OKR实施方法——关于思路和流程的思考 如何制作一份疫情场所分布地图?(附数据和源码) 经纬度编码方法推荐-plus code简介 快递到车服务的实现思路和问题思考 ACC自适应巡航控制系统介绍 《无人驾驶》-了解无人驾驶最佳读物 - Rover.Tang - 博客园 如何在一小时内更新100篇文章?-Evernote Sync插件介绍 - Rover.Tang - 博客园 新出行超级产业链之交通工具变革(网址导航) 世界机场数据(带位置坐标) - Rover.Tang - 博客园 认识车联网 无人驾驶入门2:高精度地图 无人驾驶入门1:无人驾驶概览 聊聊用机器人做无人驾驶 透过国外初创公司看高精度地图难题 百度Apollo无人驾驶入门课程下载 关于高精度地图定义的探讨
手把手教你制作微信小程序,开源、免费、快速搞定
Rover.Tang · 2018-09-24 · via 博客园 - Rover.Tang

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

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

扫描下方小程序码可以体验一下

罗孚传车小程序码

主页面:

罗孚传车小程序主界面

文章页:

罗孚传车小程序文章页

个人页:

罗孚传车小程序个人页

关于页:

罗孚传车小程序关于页

当然,还和我的公众号罗孚传说关联了:

罗孚传车小程序和罗孚传说公众号关联

为什么要做微信小程序?

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

2、做一个微信小程序其实不难,但可以装装装(你懂的)。

怎么做微信小程序?

简单的来说:WordPress+开源程序,一切免费,并且能快速搞定。

原理是:通过WordPress插件生成REST API数据,然后小程序端组织呈现。

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

一步一步开始制作小程序

1、配置SSL,让网站支持HTTPS

由于小程序需要HTTPS支持,所以你必须建立一个能够HTTPS访问的网站。

如果你使用阿里云主机,那么可以免费获得SSL证书,是由Symantec提供的DV SSL证书。

阿里云免费SSL证书

PS:如果没有找到上述免费DV SSL证书,那么选择Symantec品牌后,在证书类型中先选择增强型证书试试,应该会跳出免费证书。

当然,其他平台也是可以免费获得SSL证书的,Symantec的免费证书很通用,如果云服务商不支持,那也可以选用Let’s Encrypt提供的免费证书,自行研究一下吧。

除了获得证书外,还需要在服务器上安装证书,安装方法不再赘述,百度一下试试。

特别强调:HTTPS是小程序的必须步骤,如果你无法搞定HTTPS,那么无法建立小程序。

2、安装WordPress和插件

下载WordPress并安装,现在版本都已经是4.9以上了,不要搞出一个很旧的版本来哦。

一个建议:由于网站已经支持HTTPS,所以建议默认网站设置为HTTPS访问,大势所趋。

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

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

3、申请小程序,并配置

这里申请个人小程序应该也是可以的,就是无法使用微信支付等功能,如果能用企业申请小程序当然更好了。

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

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

小程序设置服务器域名

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

小程序插件设置

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

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

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

下载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篇文章

好了,做小程序就这么简单,现在,你是不是也准备跃跃欲试小程序了呢?