微信小程序如何加载数据库真实数据的实现


Posted in Javascript onMarch 04, 2020

微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100txy.com,具体申请步骤大家自行去申请吧,这里我就不做过多的介绍。下面我就以加载我博客素材最新的6条数据为案例来分析,下面是详细步骤。

一、进入小程序后台配置https服务器域名

微信小程序如何加载数据库真实数据的实现

二、程序中写好调用的数据,并返回json格式

//获取素材列表接口,该方法位于Application\Home\Controller\WeixinController.class.php中
  public function getdownList(){
    $data=M('Material')->field('id,title,path,date,down,description,view')->order('date desc')->limit(6)->select();
    echo json_encode($data);
  }

三、调用数据

因为我的下载模板是在index中,所有逻辑代码要写在index.js中,下面是具体的代码

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    console.log('onLoad')
    var that = this
    wx.request({
      url: 'https://www.100txy.com/weixin/getdownlist', //真实的接口地址
      data: {},
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
 
        console.log(res.data)
        that.setData({  
          Industry: res.data //设置数据
        })  
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },

四、在列表模板渲染数据

进入到index.wxml中加载数据,具体代码如下

<view class="newsInfo">
   <block wx:for="{{Industry}}" >
    <view class="newsList" wx:for-index="idx"  bindtap="showDetail" id="{{item.id}}">
      <view class="pic">
        <image style="width:110px;height:80px;" src="https://www.100txy.com/{{item.path}}"></image>
      </view>
      <view class="news_title">
        <text class="title_subject">{{item.title}}\n</text>
        <text class="title">{{item.description}}</text><text class="dianping">浏览 {{item.view}}  下载 {{item.down}}</text>
      </view>
      </view>
    <view class="hr"></view>
   </block>
</view>

最后效果如下:这就是我博客素材最新的6条数据,该小程序源码我已经放到了github上了,需要的朋友可以去下载看看。

微信小程序如何加载数据库真实数据的实现

微信小程序如何加载数据库真实数据的实现

到此这篇关于微信小程序如何加载数据库真实数据的实现的文章就介绍到这了,更多相关小程序加载数据库内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
JAVASCRIPT keycode总结
Feb 04 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
escape函数解决js中ajax传递中文出现乱码问题
Oct 30 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
常用的js方法合集
Mar 10 Javascript
js实现放大镜特效
May 18 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
javascript实现简易聊天室
Jul 12 Javascript
JavaScript Image对象实现原理实例解析
Aug 26 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 #Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 #Javascript
jquery实现垂直手风琴菜单
Mar 04 #jQuery
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 #Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 #Javascript
js回调函数原理与用法案例分析
Mar 04 #Javascript
在pycharm中开发vue的方法步骤
Mar 04 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php获取淘宝分类id示例
2014/01/16 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
Using the TextRange Object
2006/10/14 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jquery移动节点实例
2015/01/14 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Django celery异步任务实现代码示例
2020/11/26 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
党员个人对照检查材料
2014/10/01 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
领导欢迎词范文
2015/01/26 职场文书
给领导敬酒词
2015/08/12 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
JavaScript前端面试组合函数
2022/06/21 Javascript