您好、欢迎来到现金彩票网!
当前位置:手机棋牌游戏平台 > 无循环设置 >

开发 无需后端编码手把手教你把 WordPress 做成小程序

发布时间:2019-06-20 00:49 来源:未知 编辑:admin

  几周前,我花了两天时间,将自己的 WordPress 网站做了个微信小程序版本。

  知晓程序(微信号 zxcx0101)今天分享的这篇文章,将一步步讲解,如何将一个 WordPress 网站借助 REST API 开发微信小程序版。

  关注「知晓程序」公众号,在微信后台回复「开发」,获取小程序开发技巧精选文章。

  WordPress 在 4.6 版本推出了 REST API。简单来说,它是一种通过 HTTP 请求完成的客户端与服务端数据交互方案。

  我们访问平常的普通 WordPress 网站,在没有开启静态缓存的情况下,大致需要「从数据库拉取数据 → 服务端 PHP 进程拼成 HTML → 用户浏览器界面」的过程。

  REST API 的处理过程类似,但稍微不同的是:输出的是 JSON 格式的数据,且一般是给客户端(非网页浏览器)使用。

  有了 REST API,一个网站制作不同客户端(Android 或 iOS 的 app,以及微信小程序),而共享一个数据库成为了可能。

  我们可通过浏览器,直接访问 WordPress 的其中一个接口地址:,你可能会看到类似这样的返回。

  上面的 URL,表示输出第 1 页最新 5 篇文章的数据(5 篇为 1 页)。

  微信小程序通过 REST API,可以获取到 WordPress 网站上的数据。对数据进行处理后,通过前端代码渲染,就是你在微信客户端上看到的界面。

  WordPress 的 REST API 已经很完善了,什么文章数据、页面数据、用户数据等都不在话下。

  把 WordPress 作为小程序的后端,实在是省了不少人力,至少对我们这些前端狗来说,不用写苦逼的后端代码。

  上一章节大致介绍了原理后,接下来就以本站开发的「DeveWork 极客」小程序第一版为例,介绍三个页面(首页、内容页、阅读记录页)大体上是如何做出来的。

  另外在开始开发之前,我在服务端对 WordPress REST API 进行了一些定制化的输出。

  结合微信官方 quick start 的例子与个人需求,将项目结构如下分好:

  小程序的首页,就是文章列表页面。启动小程序时,会展示最新的 5 篇文章,然后通过下拉流式加载更多文章。

  设置的数据通过index.wxml循环输出。因为要做滚动加载,所以采用了小程序的scroll-view组件。

  上面的 WXML 代码中,绑定了两个事件函数:一是下拉事件pullDownRefresh(),一个是点击跳转至文章页面的事件redictSingle()。

  文章页使用到的 API 地址是。类似地,通过wx.request接口访问 URL,然后渲染数据到 WXML 页面上。

  代码与上面的类似,就不再重复。但需要提醒的是,这里涉及到如何将富文本转为微信小程序可识别的 WXML 的问题。

  因为获取的 JSON 数据中,文章正文部分是一段 HTML 代码。如果将 HTML 直接输出到小程序中,是会报错的。

  我们需要将这段 HTML 代码转化为微信小程序 WXML 语言,下一章节我会介绍这个过程。

  阅读记录页面是用来展示用户浏览历史,直接照着官方的 Hello World 例子就做起来了。

  这个页面用到的主要如下两种接口:本地缓存相关接口、用户授权相关接口(wx.login,wx.getUserInfo等)。

  从用户体验上考虑,不应该一开始就向用户申请授权,而是有需要的页面才申请。同时,也应该做好用户拒绝授权的优雅处理。

  关注「知晓程序」微信公众号,在微信后台回复「用户信息」,查看小程序如何正确地获取用户资料。

  记录的文章阅读历史数据是以本地缓存的形式保存在客户端,而非云端。所以,一句「阅读记录仅保存在本设备」的提示,是有必要的。

  上面的代码,其实是放在single.js里面的。因为我需要将文章 ID 与标题保存,而只有single.js,才会同时获取这两种数据。

  最后,我还需要在log.js的onShow生命周期函数中,绑定一个更新数据的函数:

  小程序官方宣称支持 SVG 图片,但 tab bar 并不支持 SVG 图片。

  官方推荐采用 81 px × 81 px 尺寸的 PNG 图片,但这个依然有点坑。

  建议在设计 icon 的时候,为 tab bar 的图标稍微留点透明的 padding,不然,图标在线. 图片防盗链的 referer 设置

  如果你托管图片的服务器有防盗链处理,那么得将放入白名单中。记得,这个白名单不是。3.

  组件的src绝对路径,在 web 开发中是允许类似//example.com/pic.png这种省略协议名的存在。这种图片路径,在微信 web 开发者工具也能正常显示。但是,在真机上就不能正常加载了。

  app.wxss的 Flex 布局相关代码。这样做,会降低你遇到奇葩样式问题的概率。6. wxParse 的坑

  wx-codexxx,作者本意应该是对 code 标签进行这个替换,但可能一不小心写错了。解决方案,只能是暂时删掉那段代码。

  上图也很好解释了上面的 referer 坑与图片路径 HTTPS 开头的坑。解决方案,只能先改动源码(

  整个开发过程其实并不太有难度,如果之前有使用过 Angular、Vue 这类 MVVM 框架,整个开发过程基本上只是看官方文档的问题。

  2017-08-23 18:10还可以这样玩!一键生成「专属二维码」,就靠这 4 款小程序

  2017-08-22 19:00码农必备!用它一键查「技术文档」,开发不再手忙脚乱

http://techndates.com/wuxunhuanshezhi/223.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有