基于区块链的云笔记小程序开发（一）

 今天是个特殊的日子，是我开启博客之旅的第一天，也是记录自己成长的第一天，加油！！

废话少叙，开始正题吧。

项目结构图

首页（index）

核心代码：

index.wxml

<navigator url="../detail/detail?url={{item.url}}" wx:for="{{list}}" wx:key="{{index}}" wx:if="{{index < 3}}">
　　<view class="weui-media-box weui-media-box_text">
　　　　<view class="weui-media-box__title weui-media-box__title_in-text">{{item.author_name}}</view>
　　　　<view class="weui-media-box__desc">{{item.title}}</view>
　　</view>
</navigator>

index.js

// 监听页面加载
onLoad: function (options) {
　　var that = this;
　　//判断是否获取到动态设置的globalData
　　if (app.globalData.newsData && app.globalData.newsData != '') {
　　　　that.setData({
　　　　　　// 将app中请求下来的数据赋给当前页面变量，方便后续操作
　　　　　　list: app.globalData.newsData,
　　　　　　listDate: app.globalData.newsDate
　　　　});
　　}else{
　　　　// 声明回调函数获取app.js onLaunch中接口调用成功后设置的globalData数据
　　　　app.testDataCallback = newsData =>{
　　　　　　if (newsData != '') {
　　　　　　　　that.setData({
　　　　　　　　　　list: app.globalData.newsData,
　　　　　　　　　　listDate: app.globalData.newsDate
　　　　　　　　});
　　　　　　}
　　　　}
　　}　　
}

 

 

新闻列表（dayList）

核心代码：

dayList.wxml 

<view class="weui-panel weui-panel_access">
  <view class="weui-panel__hd">{{listDate}}</view>
    <view class="weui-panel__bd">
      <navigator url="../detail/detail?url={{item.url}}" wx:for="{{list}}" wx:key="{{index}}">
        <view class="weui-media-box weui-media-box_text">
          <view class="weui-media-box__title weui-media-box__title_in-text">{{item.author_name}}</view>
          <view class="weui-media-box__desc">{{item.title}}</view>
        </view>
      </navigator>
  </view>
</view>

dayList.js

// pages/dayList/dayList.js
// 获取全局app对象
var app = getApp();
Page({
  data: {
    list:[],// 用于接收app全局对象请求下来的数据
    listDate:''// 新闻日期
  },
  onLoad: function (options) {
    var that = this;
    that.setData({
      // 将app中请求下来的数据赋给当前页面变量，方便后续操作
      list: app.globalData.newsData,
      listDate: app.globalData.newsDate
    });
  },
})

 

开发中遇到的问题：

1. 开发过程中，一切数据获取正常，可真机调试后，发现首页新闻数据没有显示，因为app.js中的onLaunch是异步的，当小程序首页打开的时候，app.js中在onLaunch里的接口还没有返回值，也就没有办法设置相应的globalData，但index.js已经执行了，当然就拿不到在app.js中动态设置的globalData的值了

2. 点击某条新闻，跳转相应详细页面

解决方法：

1. 在app.js请求完之后，再执行index.js中的onLoad方法

//app.js
App({
  onLaunch: function () {
    // 小程序启动时，调用getData发送请求
    this.getData();
  },
  globalData: {
    newsData: [],// 存放返回的新闻数据
    newsDate:'' // 存放当天新闻日期
  },
  // 发起请求
  getData: function () {
    var that = this;
    wx.request({
      url: 'xxxxx', // 仅为示例，并非真实的接口地址
      data: {
        key: 'xx',
        type: 'xxx'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        that.globalData.newsData = res.data.result.data,
        // 截取日期并赋给newsDate
        that.globalData.newsDate = res.data.result.data['0'].date.substring(0,11)
        if (that.testDataCallback) {
          that.testDataCallback(res.data.result.data);
        }
      }
    })
  }
})

// index.js
// 获取app实例
var app = getApp();
Page({
  data: {
    list: [], // 存放返回的数据
    listDate: '' // 存放日期
  },
  onLoad: function (options) {
    var that = this;
    //判断是否获取到动态设置的globalData
    if (app.globalData.newsData && app.globalData.newsData != '') {
      that.setData({
        // 将app中请求下来的数据赋给当前页面变量，方便后续操作
        list: app.globalData.newsData,
        listDate: app.globalData.newsDate
      });
    }else{
      // 声明回调函数获取app.js onLaunch中接口调用成功后设置的globalData数据
      app.testDataCallback = newsData =>{
        if (newsData != '') {
          that.setData({
            list: app.globalData.newsData,
            listDate: app.globalData.newsDate
          });
        }
      }
    }
  },
});

结果图：

 

2.通过options获取前端传过来的url进行相应跳转

详情页面（detail.wxml）

<!--pages/detail/detail.wxml-->
<web-view src='{{url}}'></web-view>

detail.js

// pages/detail/detail.js
Page({
  data: {
    url:null // 存放接收前端传过来的url
  },
  onLoad: function (options) {
    var that = this;
    // console.log(options.url);
    that.setData({
      url: options.url // 接收前端传过来的url
    });
  },
})

结果图

参考：https://www.cnblogs.com/jiangtengteng/p/10837659.html