微信小程序> 小程序实例制作微信-手把手教你制作微信小程序,开源、免费、快速搞定-微信小程序实例

小程序实例制作微信-手把手教你制作微信小程序,开源、免费、快速搞定-微信小程序实例

浏览量:2158 时间: 来源:tangf2004
最近做了个“罗孚传车”的小程序

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

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

3.

4.主页面:

5.

6.文章页:

7.

8.个人页:

9.

10.关于页:

11.

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

13.

为什么要做微信小程序?

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

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

怎么做微信小程序?

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

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

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

一步一步开始制作小程序

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

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

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

22.

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

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

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

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

27.2、安装WordPress和插件

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

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

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

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

32.3、申请小程序,并配置

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

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

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

36.

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

38.

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

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

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

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

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

44.varDOMAIN=“your-site-name.com”;//配置域名varMINAPPTYPE=“0”;//小程序的类型,如果是企业小程序请填:0,如果是个人小程序请填:1varWEBSITENAME=“罗孚传车”;//网站名称varABOUTID=2;//wordpress网站"页面"的id,注意这个"页面"是wordpress的"页面",不是"文章"varPAGECOUNT=‘10’;//每页文章数目varCATEGORIESID=‘all’//专题页显示全部的分类//varCATEGORIESID=‘1,1059,98,416,189,374,6,463’;//指定专题页显示的分类的idvarINDEXLISTTYPE=“all”//首页显示所有分类//varINDEXLISTTYPE=“1”//指定首页显示分类的idvarPAYTEMPPLATEID=‘t1YE-N’;//赞赏消息模版idvarREPLAYTEMPPLATEID=‘c_Ni2’;//回复评论消息模版idvarZANIMAGEURL=‘…/…/images/qrcode’;//微信赞赏的图片链接,用于个人小程序的赞赏varLOGO=“…/…/images/logo-icon.png”;//网站的logo图片varPOSTERIMGURL="…/…/images/logo700.png";//生成海报如果没有首图,使用此处设置的图片作为海报图片。//设置downloadFile合法域名,不带https,在中括号([])里增加域名,格式:{id=,domain:'www..com’},用英文逗号分隔。//此处设置的域名和小程序与小程序后台设置的downloadFile合法域名要一致。varDOWNLOADFILEDOMAIN=[{id:1,domain:‘your-site-name.com’}]

45.除了config文件的修改,程序中的页面名称等内容也需要修改,自行查找修改即可。

46.修改完后即时预览,差不多了就可以上传代码啦。

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

48.是不是觉得内容有点少?教你一招:一小时内更新100篇文章!

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎