小程序服务器端端接口,微信小程序:后端服务接口(WordPress)
微信的小程序相当于是一套前端(Frontend)应用的框架,让它变成一个真正能用的 App,我们还得给它提供一个后端服务,或者叫应用后台(Backend)。几乎所有的后端应用框架都支持为小程序提供后端服务。WordPress,Drupal,Rails,Node.js ... 了解一下 RESTful 风格的后端服务接口。
后端服务通过 RESTful 风格的接口为小程序提供数据,或者处理从小程序那里发送过来的数据。比如可以给小程序提供一个内容列表让它在页面上显示,可以接收小程序发送(POST,DELETE,PATCH)过来的数据,比如把内容保存到后端的数据库里。
WordPress
WordPress 是一套非常流行的开源内容管理系统。你可以用它管理内容,比如文章,图片,文件,用户等等。这些内容管理功能,都有一个对应的 REST 接口,所以非常适合为其它类型的应用提供后端服务,比如小程序,前端应用,移动端应用。
宁皓网最近发布了《微信小程序:应用后台(WordPress)》课程,可以帮您使用 WordPress 作为小程序的应用后台,为小程序提供后端服务。
准备
先根据《WordPress 开发:开发环境》这个课程在本地运行一个 WordPress 网站。《WordPress 开发:生产环境》演示了怎么把本地开发的项目部署到真正的服务器上。想用 WordPress 网站作为小程序的应用后台,得保证这个网站已经发布到互联网上了,就是任何人都可以通过互联网访问到你的网站。
在小程序的开发阶段,你可能希望使用在本地开发环境上的 WordPress ,这样调试起来更方便。我们可以使用 SSH 通道的方法,在本地与服务器之间打个通道,这样小程序对后端服务接口的访问会被转发到你的本地开发环境上。《在互联网访问本地开发环境》里面介绍了方法。
在服务器上的用来转发请求的 Nginx 配置:
upstream wpdev {
server 127.0.0.1:7689;
}
server {
listen 443 ssl;
server_name wp-dev.ninghao.net;
ssl on;
index index.html;
ssl_certificate /etc/nginx/ssl/wp-dev.ninghao.net/214318278430706.pem;
ssl_certificate_key /etc/nginx/ssl/wp-dev.ninghao.net/214318278430706.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
ssl_prefer_server_ciphers on;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
expires off;
sendfile off;
proxy_pass https://wpdev;
}
}
打通道用的命令:
ssh -vnNT -R 7689:192.168.50.5:443 用户@服务器IP
7689 是服务器与本地主机连接用的端口号,192.168.50.5 是本地开发环境上的虚拟机的 IP 地址,443 是虚拟机开放的端口,因为我在本地开发环境上运行的 WordPress 启用了 HTTPS,所以端口号是 443。
HTTPS
直接用 HTTP 传输的数据很有可能会被中间人给拦截下来,因为数据没加密,所以他们会知道具体的数据。更安全的方法是使用 HTTPS 加密传输数据,HTTPS 现在是网站的标配,网站必须要支持使用它。小程序也要求后端服务接口必须通过 HTTPS 传输数据。《HTTPS 与 HTTP2》这个课程介绍了为网站启用 HTTPS 的方法。
应用
一切准备就绪,在一个小程序页面上的 onLoad 生命周期方法里,去请求 WordPress 的文章列表接口,然后把请求得到的数据放到小程序的页面上使用。
逻辑
const API_BASE = 'https://wp-dev.ninghao.net/wp-json'
const API_ROUTE = 'wp/v2/posts'
Page({
data: {
entities: [],
},
onLoad () {
wx.request({
url: `${ API_BASE }/${ API_ROUTE }`,
success: (response) => {
console.log(response)
const entities = response.data
this.setData({
entities
})
}
})
}
})
在页面上添加了一个叫 entities 的数据,默认它是个空白的数组。在 onLoad 方法里,使用 wx.request 这个小程序提供的请求功能去请求 WordPress 网站的文章列表接口。假设一切正常,文章列表内容会在 response.data 这个属性里,我们把它交给了页面上的 entities 这个数据。这样在页面的视图文件上,就可以利用这些数据去显示一些内容了。
视图
wx:for="{{ entities }}" wx:key="{{ item.id }}">
{{ item.title.rendered }}
在视图里面,使用 wx:for 循环处理了一下页面上的 entities 数据,它里面的东西就是从 WordPress 那里得到的一个文章列表内容。在视图里,绑定输出了一个 item.title.rendered,item 是每次循环的时候当前项目的默认的名字,这里表示的就是一个文章内容。title 是文章的标题,rendered 是具体的标题的内容。
现在,在小程序的页面上你应该会看到一个来自 WordPress 网站里的文章列表内容。
微信小程序 WordPress
小程序服务器端端接口,微信小程序:后端服务接口(WordPress)相关推荐
- 微信小程序是计算机软件吗,pc端 移动端 客户端 微信小程序区别?
app是什么? app英文是application,翻译是,手机软件的应用程序. pc端是什么? PC是personal computer的缩写,意思就是是个人计算机,中文名叫电脑,英文名则是PC. ...
- Web端访问微信小程序云数据库
撰写背景: 用微信小程序云开发做了一个与web管理平台配套的微信小程序,Web端需要对接(访问)到云环境的云数据库. 开门见山: 在微信开发者工具里先把云开发控制台打开, 设置->权限设置-&g ...
- 微云二手车运营版 公众号+小程序v1.1.20+微信小程序+抖音端源码安装教程
系统包括PC+公众号+小程序v1.1.20+微信小程序+抖音小程序前端,使用前先在后台初始化下数据.播播资源网技术小编看了下说明是带PC端功能,但后台没找到设置的地方,不过公众号+小程序+抖音也够用了 ...
- uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发
摘要:由于市场的需求不断变化,原有的开发环境和生产环境已经无法满足需求,多环境开发已经是越来越多的公司要面临的问题.本文先介绍如何将HBuilderX创建的uni-app项目转换成vue-cli项目, ...
- WEB端和微信小程序端的文档文件在线预览方法
文件的在线预览方式汇总 文件在线预览功能可以提高用户体验,值得加入. 一般常见的文件有office套装.pdf.txt.md.和音视频. 音视频的预览是单独一块,今天主要说说文档文件的在线预览功能. ...
- 小程序端JS加密,传输PHP端解密--微信小程序联盟
原创内容来自作者: 行渐远 由于怕小程序传输数据被抓包,因为我做的淘宝客,所以有些数据连用户本身都需要加密不让看的,所以在网上找了许多办法,大多数都是AES加密的方式,但是生成的字符太多放弃了,然后就 ...
- mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍 项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱 字母简谱 数字简谱对字母简谱 后期看情况更新追加其他训练. 产品展示 扫描下方小程序 ...
- 从0开发《工程测绘大师》小程序之什么是微信小程序篇(一)
我们今天来讲讲如何从0开发<工程测绘大师>小程序之什么是微信小程序篇.先来说说什么是微信小程序,什么是微信小程序?为什么会有微信小程序诞生?它到底解决了什么痛点?与传统的网页开发和APP相 ...
- 小程序开发过程中常见问题[微信小程序、支付宝小程序]
小程序开发过程中常见问题[微信小程序.支付宝小程序] 正文 一.样式中如何使用background-image呢? background-image支持网络的图片链接或者base64 二.使用自适应单 ...
最新文章
- Educational Codeforces Round 30 A
- SPringMVC使用总结
- WebKit和Chrome源码分析
- vbsedit无法创建空文档_如何用Python快速优雅的批量修改Word文档样式?
- 安防监控产业链全景梳理
- matlab 里try用法,matlab在整个程序(全局)中使用try-catch来报告错误
- 投行称在三季度所产iPhone中 iPhone 13将超过35%
- springMvc + websocket 实现点对点 聊天通信功能
- 搭建vue并且实现360和谷歌浏览器对office(ntko)在线编辑工具的集成
- qos 流控功能_QOS流量控制管理详解!
- 武松杀潘金莲时为何先扯开其衣服?得知真相才明白武松多么机智!
- jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)
- 3d打印英语文献_多材料的增材制造(3D打印)
- MapReduce明星搜索指数统计,找出人气王
- 阿里云的免费云虚拟主机
- Markdown语法之html内嵌样式
- 955.WLB 不加班公司名单(持续更新)
- python必备单词整理_别乱找了,Python常用单词Word合集,已经给你整理全了
- Android Socket连接(模拟心跳包,断线重连,发送数据等)
- 造血干细胞扩增、转染以及基因编辑优化解决方案
热门文章
- (附源码)计算机毕业设计SSM化妆品销售网站
- python sanic 性能_sanic性能对比
- 假如你有个妹子,你便理解了大部分程序,可惜木有!!!!
- python 远程控制电脑开机_Python黑科技:在家远程遥控公司电脑,python+微信一键连接!...
- javaweb课程设计-家教中心系统
- 使用python+ffmpeg开发的wav分割小工具
- 支付宝小程序-上拉加载,下拉刷新
- [硬件,CPU篇]英特尔中央处理器详解
- 多网卡电脑野外作业建议
- Docker的安装以及可视化图形界面的安装