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


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 相关文章推荐
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
js密码强度校验
Nov 10 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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中使用Oracle数据库(1)
2006/10/09 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php自定义错误处理用法实例
2015/03/20 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
会计岗位职责范本
2014/03/07 职场文书
婚内分居协议书范文
2014/11/26 职场文书
三年级学生评语大全
2014/12/26 职场文书
班主任工作实习计划
2015/01/16 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
2015年中秋节主持词
2015/07/30 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
MySQL去除密码登录告警的方法
2022/04/20 MySQL