单纯的一则QQ小流程

来源：147采集时间：2022-05-08 作者：147小编

序言

该篇博纳县来源于两门专业课程——进阶QQ小流程，这是两门极为单纯的小流程进阶手册音频（如果说小流程原本就很单纯），依照同学的提供更多的源标识符和片断，将其做了部份的内部结构和式样更动，有兴趣的能浏览该工程项目，运转查阅结论。

起跑过分单纯，在这不表明，请间接到官网迈入他们的小流程之旅，上面重新整理许多他们指出关键的习题。

自上而下命令行

app.json文档用以对QQ小流程展开自上而下实用性，下定决心网页文档的方向、询问处整体表现、增设互联网延时天数、增设多 tab 等，具体内容的请点选这儿

swiper模块的采用

那个模块是较为常见的，说它较为关键，更为重要原因在于它的常见性，也即使它的红豆有极为好的先进经验性。

内部结构标识符

脚本标识符

Page({
  data: {
    imgUrls: [
      /images/home1.jpg,
      /images/home2.jpg,
      /images/home3.jpg,
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    proList: null,
  }
})

说那个模块的采用具有先进经验性原因在于将属性和属性值完全分离了来展开管理，在一定程度上来说，这是极为好的一种方式，内部结构标识符和脚本标识符分离便于管理和维护。

调用数据的三种方式

在小流程中，一共有三种调用数据的方式，其中一种是调用后台数据，另外两种是调用本地数据，现在我们先来看一看最单纯的本地数据调用方式：

// 定义本地脚本数据
Page({
  data: {
    imgUrls: [
      /images/home1.jpg,
      /images/home2.jpg,
      /images/home3.jpg,
    ]
  }
})

//调用本地数据

第二种调用本地数据稍微复杂许多，它和Vue流程中调用json数据的方式完全不同，在小流程不能间接调用json文档中的数据，只能将数据保存在一个脚本文档中，然后将其exports出来，最后在需要调用数据的文档中导入，具体内容请看以下标识符：

// 步骤一：分离数据，将数据定义在顶层的data目录下
var joinList_data = [
  {
    "proName": "关于NBA",
    "proDesc": "NBA（National Basketball Association）是美国职业篮球联赛的简称",
    "id": "001"
  }
]
module.exports = {
  joinList: joinList_data
}

// 步骤二：在需要调用数据的脚本文档中引入
var joinListData = require("../../data/joinList.js");

// 步骤三：在周期函数中赋值
Page({
  data: {
    joinList: null
  },
  // 生命周期函数--监听网页加载
  onLoad: function () {
    this.setData({
      joinList: joinListData.joinList
    })
  }
})

// 步骤四：在内部结构标识符中遍历数据

  {{item.proName}}
  {{item.proDesc}}

第三种数据调用方式最关键，即使那是必须会的，这种方式是从后台请求回来数据展开采用，具体内容方式请看以下标识符：

Page({
  data: {
    proList: null,
  },
  onLoad: function () {
    this.getProList();
  }
  // API请求方法
  getProList: function(){
    var self = this;
    wx.request({
      url: http://guozhaoxi.top/wx/data.json,
      method: GET,
      success: function(res){
        self.setData({
          proList: res.data,
        })
      },
      fail: function(){
        console.log(调用数据失败);
      }
    })
  }
})

// 采用请求回来的数据

模块之间的三种传值方式

一说到模块传值，相信有经验的开发人员都知道它的关键性，上面单纯的来看看三种传值方式的标识符。

第一种：自上而下传值

// 步骤一：在自上而下脚本文档中定义数据
App({
  globalData: {
    userInfo: null,
    userName: 自上而下变量传值,
  }
})

// 步骤二：获取应用实例，不然无法调用自上而下变量
const app = getApp()

// 步骤三：调用自上而下变量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

第二种：url传值

// 步骤一：采用关键字bindtap绑定一个点选事件方法，data-index是传入一个值


// 步骤二：在脚本文档中定义那个方法（方法并不是定义在一个methods集合中的）
Page({
  data: {},
  onLoad: function () {},
  toDetail: function(e){
    // index代表的遍历对象的下标
    var index = e.currentTarget.dataset.index;
    var proList = this.data.proList;
    var title = proList[index].proName;
    wx.navigateTo({
      url: /pages/detail/detail?title=+title,
    })
  }
})

// 步骤三：在detail模块的脚本文档中接收title那个传入过来的值
Page({
  data: {},
  onLoad: function (options) {
    console.log(options.title);
  },
})

第三种：setStorageSync传值

// 步骤一：采用关键字bindtap绑定一个点选事件方法，data-index是传入一个值


// 步骤二：在脚本文档中定义那个方法（方法并不是定义在一个methods集合中的）
Page({
  data: {},
  onLoad: function () {},
  toDetail: function(e){
    var index = e.currentTarget.dataset.index;
    var proList = this.data.proList;
    var title = proList[index].proName;
    wx.setStorageSync(titleName, title);
    wx.navigateTo({
      url: /pages/detail/detail,
    })
  }
})

// 步骤三：在detail模块的脚本文档中采用wx.getStorageSync接收titleName那个传入过来的值
Page({
  data: {},
  onLoad: function (options) {
    var titlen = wx.getStorageSync(titleName);
    console.log(titlen);
  },
})

模块传值的应用场景

关于模块传值的应用，同学在音频中并没有给出，他们瞎琢磨出一个红豆，记住：在真正开发中，千万别这么用。那个红豆的作用是让我们对模块的传值有一个大概的应用场景，上面请看标识符实现：

// 数据接收方
Page({
  data: {
    iskebi: false,
    iszhan: false,
    isqiao: false,
    isgeli: false
  },
  onLoad: function (options) {
    
  },
  onReady: function () {
    var titlee = wx.getStorageSync(titleName);
    console.log(titlee);
    if (titlee == 科比·布莱恩特) {
      this.setData({iskebi: true});
    } else if (titlee == 勒布朗·詹姆斯){
      this.setData({ iszhan: true });
    } else if (titlee == 迈克尔·乔丹) {
      this.setData({ isqiao: true });
    } else{
      this.setData({ isgeli: true });
    }
  }
})

// 数据显示层

  我是科比的球迷


  我是詹姆斯的球迷


  我是乔丹的球迷


  我是格里芬的球迷

基础库兼容

那个东西其实也不是太关键，知道有个玩意，以及如何去判断和解决就行，上面看标识符：

Page({
  data: {},
  onLoad: function () {},
  // copy事件
  copy: function(){
    // 检测版本是否具备wx.setClipboardData那个API
    if (wx.setClipboardData){
      wx.setClipboardData({
        // 复制的内容，能增设为动态的数据
        data: 232323232,
        success: function (res) {
          // 模态框
          wx.showModal({
            title: 复制成功,
            content: 内容已经复制成功！,
          })
        }
      })
    }
    else{
      wx.showModal({
        title: 提示,
        content: 您的QQ版本太低，请升级,
      })
    }
  }
})