联系我们

微信扫描上方二维码

  • 专注于移动端

    专注于移动端+小程序的建站框架

迅睿CMS支持多终端展示内容

迅睿CMS不仅仅是内容管理系统,它还能在多种终端来调用和展示这些内容

PC网站终端

PC电脑传统网站是通过HTML模板页面来展示CMS内容

移动端H5终端

移动端H5网站通过HTML5模板页面来展示CMS内容

App终端

iOS和安卓APP客户端通过API接口获取CMS内容并展示在终端

小程序/轻应用终端

小程序/轻应用通过API接口获取CMS内容并展示在终端

准备工作

基于迅睿CMS开发APP和小程序时,必须使用API插件

API接口
为移动端APP、小程序提供完备的服务端数据解决方案,提供客户端对全站内容读写接口,文件上传和下载统一接口,完美复合移动端 APP 开发者的需求
HbuilderX
基于uniapp的框架开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台

第一步、安装API插件

安装api插件,设置api密钥字符串,用于终端请求

API请求地址格式为:https://www.网站.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F

第二步、创建小程序

使用微信开发者工具,创建小程序,获取cms数据展示

1、使用微信开发者工具创建小程序

《微信开发者工具》需要在微信官网下载。
新建小程序项目
AppId选择【测试号】
开发模式选择【小程序】
语言默认选择【JavaScript】

2、系统会生成一些默认的文件

app.js 此文件是小程序项目的主心文件
我们把api请求地址参数定义在这个文件里面,以便后面的全局调用

3、在app.js中定义全局调用的api请求变量
 globalData: {
    userInfo: null,     
    http_api:"http://www.pcms.com/index.php?appid=2&appsecret=PHPCMF9BF840CB2139F&",
  }
                    
4、在index.js中读取cms数据

pages/index.js 此文件是小程序入口文件
我们来请求cms的文章模块10条数据

     var self = this;
    wx.request({
      url:  app.globalData.http_api + "s=news&c=search&pagesize=10&api_call_function=module_search_news_list",
      method: 'GET',
      success: function (res) {
        console.log(res);
        if (res.data.code == 1) {
          self.setData({
            mynews: res.data.data,
          });
        } else {
          console.log(res.data.msg);
        }

      }

    });
                
5、在index.wxml中当前向cms请求的数据

<view class="container">
   <block wx:for="{{mynews}}" wx:for-item="news">
   <view class="news-view">
     <view class="news-title">
          {{news.title}}
     </view>  
   </view>
   </block>

  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
                    
6、编译预览小程序

左边图片中的数据已经成功的读取出CMS后台的文章标题
如果存在读不出来数据时,可以在开发工具右上角开启【不校验合法域名、不校验HTTPS认证】