小程序开发,迅睿框架,产品中心,迅睿小程序CMS,四川迅睿云软件开发有限公司

联系官方销售客服

1835022288

028-61286886

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

迅睿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>