联系我们
软件销售
投诉邮箱

q@xunruicms.com

  • 专注于移动端

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

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

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

PC网站终端

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

移动端H5终端

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

App终端

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

小程序/轻应用终端

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

准备工作

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

API接口
本插件为移动端APP、小程序提供完备的服务端数据...
微信
用于接入微信公众号、微信小程序插件,微信模板消息...
微信小程序Dem...
微信小程序Demo提供数据查询、数据写入、用户登...

第一步、安装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认证】

第三步、设计小程序展示界面

由开发者设计出适合自身网站风格的小程序界面

更多小程序界面作品