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


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 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
原生JS生成指定位数的验证码
Oct 28 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实现邮件发送并带有附件
2014/01/24 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
python zip()函数使用方法解析
2019/10/31 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
基于FME使用Python过程图解
2020/05/13 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
表彰先进集体通报
2014/01/12 职场文书
高三自我评价
2014/02/01 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
庆七一主持词
2015/06/29 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python