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


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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
javascript不可用的问题探究
Oct 01 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
PHP PDO数据库操作预处理与注意事项
2019/03/16 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
解决Python一行输出不显示的问题
2018/12/03 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
学雷锋志愿服务月活动总结
2014/03/09 职场文书
安全生产专项整治方案
2014/05/06 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
小学班主任事迹材料
2014/12/17 职场文书
上班迟到检讨书
2015/05/06 职场文书
小学体育教学随笔
2015/08/14 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL