• 小程序百问百答

    目录

    1.小程序当前页面A方法如何传递信息到B方法

    2.小程序如何从其他页面获取参数

    3.小程序如何快速新增页面

    （1）点击pages文件，右键新增文件夹

    （2）点击新增的文件夹，右键新增page

    （3）就会产生四个可编辑页面啦

    4.如何查看和调整小程序显示页面的先后顺序

    （1）可以在app.json查看页面显示的先后顺序

    5.小程序如何设置全局变量 

    （1）页面如何调用

    （2）页面如何赋值与使用

    6.小程序生命周期方法简介

    （1）生命周期函数

    7.小程序列表单选与全选功能实现

    （1）图片效果演示

    （2）示例代码

    1.小程序当前页面A方法如何传递信息到B方法

    例：在data初始化当前页面的全局变量str（可以是任意变量）

    可以在当前方法或其他方法直接通过this直接获取或赋值当前变量（不推荐）

    例:this.str = num;

    建议将this封装赋值一下

    例：var that = this；

    为什么要封装this：

    this对象在程序调用时，如点击事件中会随时改变，而var that=this之后，that没重新赋值之前仍然是指向当时的this，这样就不会出现找不到原来的对象而导致报错

    原因简述：当this指向已经发生改变，将不存在data属性，而var that=this之后可以避免这个问题

    1. Page({
    2.  
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.     str:null
    8.   },
    9.  
    10.   /**
    11.    * 生命周期函数--监听页面加载
    12.    */
    13.   onLoad(options) {
    14.     var that = this;
    15.     var num = 1;
    16.     that.str = num;
    17.   },
    18. })

    通过在另一个方法重新var that=this可以将上一个方法的值获取下来

    通过console.log将对象进行打印

    代码：

    1. /**
    2.    * 生命周期函数--监听页面初次渲染完成
    3.    */
    4.   onReady() {
    5.     var that = this;
    6.     console.log(that.str)  //打印
    7.   },

     结果：

    2.小程序如何从其他页面获取参数

    A页面：

    小程序通过wx.navigateTo方法跳转页面时，可以通过url携带参数传递数据到对应的页面

    代码：

    1. wx.navigateTo({
    2.             url: '../SaleSelect/SaleSelect?number=' + number + '&phone=' + that.phone + '&user' + that.user
    3. })

    B页面：

    可以通过 onLoad: function (options)，通过options对象获取到上一个页面的数据

    代码：

    1. onLoad: function (options) {
    2.     var that = this;
    3.     var number = options.number;
    4.     that.numbers = number;
    5.     console.log(options.number)
    6. }

     打印结果：

    3.小程序如何快速新增页面

    （1）点击pages文件，右键新增文件夹

    例：

    （2）点击新增的文件夹，右键新增page

    例：

    （3）就会产生四个可编辑页面啦

    4.如何查看和调整小程序显示页面的先后顺序

    （1）可以在app.json查看页面显示的先后顺序

    注:可通过调整页面的先后顺序，修改页面的显示层级，排名优先显示越优先，末尾不需要加逗号

    例：我将UserCTB排至第一位，显示的就是UserCTB页面

     

     我将login页面排至第一位，显示的就是login页面（简陋的画了一下页面，勿喷）

     

    5.小程序如何设置全局变量 

    在app.js页面通过调用onLaunch方法对变量进行初始化赋值，在其他页面就可以通过调用app.js.对象名对变量进行赋值和全局调用

    onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

    （1）页面如何调用

    想要调用app.js页面的变量，必须在对应的JS页面对app进行调用

     代码：

    var app = getApp()

    （2）页面如何赋值与使用

    A页面：

    通过后台在A页面对app.user和app.phone进行赋值打印

    打印：

    B页面：

    注：B页面头部也需要对app.js进行初始化，才能在当前页面进行全局变量的接收与赋值

    var app = getApp()

     在B页面接收赋值打印全局变量

     打印：

    6.小程序生命周期方法简介

    （1）生命周期函数

    onLoad：监听页面加载，参数为上个页面传递的数据，参数类型为 Object，通过参数名.对象获取上一个页面传递的数据

    onReady：监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

    onShow：监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

    onHide：监听页面隐藏,通过tabbar标签切换页面，同样是隐藏并不是卸载

    onUnload：监听页面卸载，页面返回或跳转都会触发当前事件

    onPullDownRefresh:监听用户下拉动作,用户下拉刷新的时候会触发事件

    onReachBottom：监听页面触底，页面上拉触底事件的处理函数

    onShareAppMessage：监听用户右上角分享，用户点击右上角分享的处理函数

    代码：

    1. Page({
    2.  
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.  
    8.   },
    9.  
    10.   /**
    11.    * 生命周期函数--监听页面加载
    12.    */
    13.   onLoad: function (options) {
    14.  
    15.  },
    16.  
    17.   /**
    18.    * 生命周期函数--监听页面初次渲染完成
    19.    */
    20.   onReady: function () {
    21.  
    22.   },
    23.  
    24.   /**
    25.    * 生命周期函数--监听页面显示
    26.    */
    27.   onShow: function () {
    28.     
    29.   },
    30.  
    31.   /**
    32.    * 生命周期函数--监听页面隐藏
    33.    */
    34.   onHide: function () {
    35.  
    36.   },
    37.  
    38.   /**
    39.    * 生命周期函数--监听页面卸载
    40.    */
    41.   onUnload: function () {
    42.  
    43.   },
    44.  
    45.   /**
    46.    * 页面相关事件处理函数--监听用户下拉动作
    47.    */
    48.   onPullDownRefresh: function () {
    49.     
    50.   },
    51.  
    52.   /**
    53.    * 页面上拉触底事件的处理函数
    54.    */
    55.   onReachBottom: function () {
    56.  
    57.   },
    58.  
    59.   /**
    60.    * 用户点击右上角分享
    61.    */
    62.   onShareAppMessage: function () {
    63.  
    64.   },
    65.  
    66. })

    7.小程序列表单选与全选功能实现

    （1）图片效果演示

    全选：

    多选:

     打印效果显示:

    （2）示例代码

      js页面

    1.   Page({
    2.  
    3.   /**
    4.    * 页面的初始数据
    5.    */
    6.   data: {
    7.     headerArray: [{
    8.       text: '单据编号',
    9.     }, {
    10.       text: '单据类型'
    11.     }, {
    12.       text: '查看用户'
    13.     }, {
    14.       text: '联系方式'
    15.     }],
    16.     SalaWxCtlist: [], //后台数组名称
    17.     number:null, //单个编码
    18.     select_all: false,  //是否全选
    19.   },
    20.  
    21.   onLoad(options) {
    22.     var that = this
    23.     wx.request({
    24.       //后台数据获取
    25.       url: 'https:xxxxxxxxxxxxxxx',
    26.       data: {},
    27.       header: {
    28.         'content-type': 'application/json' // 默认值
    29.       },
    30.       success(res) {
    31.         console.log(res.data)
    32.         that.setData({
    33.           SalaWxCtlist: res.data.SalaWxCtlist,
    34.         })
    35.       },
    36.     })
    37.   },
    38.  
    39.  
    40. //全选与反全选
    41.   selectall: function (e) {
    42.     var arr = []; //存放选中编码的数组
    43.     for (let i = 0; i < this.data.SalaWxCtlist.length; i++) {
    44.       this.data.SalaWxCtlist[i].checked = (!this.data.select_all)
    45.       if (this.data.SalaWxCtlist[i].checked == true) {
    46.         // 全选获取选中的值
    47.         //用分隔符将每个编号分开
    48.         arr = arr.concat(this.data.SalaWxCtlist[i].FBillNo.split(',')); 
    49.       }
    50.     }
    51.     this.setData({
    52.       SalaWxCtlist: this.data.SalaWxCtlist,
    53.       select_all: (!this.data.select_all),
    54.       choseNames: arr  //choseNames 选中的编码
    55.     })
    56.   },
    57.  
    58.   // 单选
    59.   checkboxChange: function (e) {
    60.     var that = this;
    61.     console.log(e.detail.value)
    62.     that.number = e.detail.value;
    63.     this.setData({
    64.       choseNames: e.detail.value, //单个选中的值
    65.     })
    66.     if (this.data.choseNames.length == this.data.SalaWxCtlist.length) {
    67.       this.setData({
    68.         select_all: true
    69.       })
    70.     } else {
    71.       this.setData({
    72.         select_all: false
    73.       })
    74.     }
    75.   },
    76. })

     xwml页面

    1. <view class="page">
    2.   <form bindsubmit="formSubmit">
    3.     <view class="content">
    4.       <view class="top-title">
    5.         <button class="title-item" type="primary" form-type="submit" bindtap="submitbtn">清除button>
    6.       view>
    7.       <swiper-item>
    8.         <view>
    9.           <scroll-view scroll-x="true" class="scrollClass">
    10.             <view class="table">
    11.               <view class="table_header">
    12.                 <view class="th">
    13.                   <checkbox checkeds="{{elect_all}}" bindtap="selectall" />
    14.                 view>
    15.                 <block wx:for="{{headerArray}}" wx:key="{{text}}">
    16.                   <view class="th">
    17.                     <view class="centerclass cell_label">{{item.text}}view>
    18.                   view>
    19.                 block>
    20.               view>
    21.               <checkbox-group bindchange="checkboxChange">
    22.                 <block wx:for="{{SalaWxCtlist}}" wx:key="number" wx:for-item="mate" class="rowblock">
    23.                   <view class="data">
    24.                     <view class="th">
    25.                       <checkbox value="{{mate.FBillNo}}" checked="{{mate.checked}}" />
    26.                     view>
    27.                     <view class="th">
    28.                       <view bindtap="editMateral" class="centerclass cell_label" data-number='{{mate.FBillNo}}'>{{mate.FBillNo}}view>
    29.                     view>
    30.                     <view class="th">
    31.                       <view class="centerclass cell_label">{{mate.bill}}view>
    32.                     view>
    33.                     <view class="th">
    34.                       <view class="centerclass cell_label">{{mate.client}}view>
    35.                     view>
    36.                     <view class="th">
    37.                       <view class="centerclass cell_label">{{mate.phone}}view>
    38.                     view>
    39.                   view>
    40.                 block>
    41.               checkbox-group>
    42.             view>
    43.           scroll-view>
    44.         view>
    45.       swiper-item>
    46.     view>
    47.   form>
    48. view>

     wxss页面

    1. page {
    2.   background: #f5f5f5;
    3. }
    4.  
    5. .tabs {
    6.   display: flex;
    7.   flex-direction: row;
    8.   width: 100%;
    9.   z-index: 99;
    10. }
    11.  
    12. .select {
    13.   font-size: 15px;
    14.   color: red;
    15.   width: 50%;
    16.   text-align: center;
    17.   height: 45px;
    18.   line-height: 45px;
    19.   border-bottom: 5rpx solid red;
    20. }
    21.  
    22. .default {
    23.   font-size: 15px;
    24.   margin: 0 auto;
    25.   padding: 15px;
    26. }
    27.  
    28. .hr {
    29.   border: 1px solid #cccccc;
    30.   opacity: 0.2;
    31. }
    32.  
    33. .head {
    34.   padding-top: 15px;
    35.   text-align: center;
    36.   font-weight: bold;
    37.   font-size: 25x;
    38. }
    39.  
    40. .table {
    41.   display: inline-flex;
    42.   flex-direction: column;
    43.   border: 1px solid rgba(218, 217, 217, 1);
    44.   border-bottom: 0;
    45. }
    46.  
    47. .scrollClass {
    48.   display: flex;
    49.   width: 100%;
    50.   white-space: nowrap;
    51.   margin-top: 23px;
    52.   height: 100%;
    53.   background-color: #fff;
    54. }
    55.  
    56. .table_header {
    57.   display: inline-flex;
    58.  
    59. }
    60.  
    61. .cell_label {
    62.   font-size: 26rpx;
    63.   font-weight: bold;
    64.   color: rgba(74, 74, 74, 1);
    65. }
    66.  
    67. .data {
    68.   display: flex;
    69.   flex-direction: row;
    70. }
    71.  
    72. .th {
    73.   display: flex;
    74.   width: 200rpx;
    75.   height: 90rpx;
    76.   border-right: 1rpx solid rgba(218, 217, 217, 1);
    77.   border-bottom: 1rpx solid rgba(218, 217, 217, 1);
    78.   justify-content: center;
    79.   align-items: center;
    80.   overflow-x: auto;
    81. }
    82.  
    83.  
    84. button[type=primary] {
    85.   background-color: #070ac1; /*按钮颜色*/
    86. }
    87.  
    88. .top-title {
    89.   display: flex;
    90.   justify-content: center;
    91.   font-size: 12px
    92. }
    93. .title-item {
    94.   width: 120rpx;
    95.   line-height: 40rpx;
    96.   border-radius: 10rpx;
    97.   margin: 20rpx 0;
    98. }
    99. .paging .page_btn{
    100.   width: 96rpx;
    101.   height: 32rpx;
    102.   font-size: 32rpx;
    103.   font-family: "PingFangSC";
    104.   color: #c79b4a;
    105.   line-height: 36rpx;
    106.   float: left;
    107.   margin: auto 23rpx;
    108. }
    109.  .page_num{
    110.   font-size: 24rpx;
    111.   font-family: "PingFangSC";
    112.   color: #c79b4a;
    113.   line-height: 36rpx;
    114.   float: left;
    115.   margin: auto 10%;
    116. }
    117. .paging{
    118.   width: 100%;
    119.   height: 108rpx;
    120.   font-size: 32rpx;
    121.   font-family: "PingFangSC";
    122.   color: #c79b4a;
    123.   line-height: 36rpx;
    124.   text-align: center;
    125. }
    126. .paging .up_page{
    127.   width: 96rpx;
    128.   height: 32rpx;
    129.   float: left;
    130.   margin-left: 72rpx;
    131. }
    132.  .paging .down_page{
    133.   width: 96rpx;
    134.   height: 32rpx;
    135.   float: right;
    136.   margin-right: 72rpx;
    137. }
    138. .con .prizelist .page_num{
    139.   width: 500rpx;
    140.   font-size: 24rpx;
    141.   font-family: "PingFangSC";
    142.   color: #c79b4a;
    143.   line-height: 36rpx;
    144.   margin: auto;
    145. }

     

     持续更新中.......

  • 相关阅读:
    一文说清楚前端Event Loop
    Excel 可视化教程之可视化的科学与艺术
    《Linux Vim急救手册：E138错误全攻略与故障排除秘籍》
    【电源专题】LDO的电源抑制比（PSRR）
    windows安装metesploit遇到的问题
    性能优化——资源优化笔记
    Java类加载器详解
    linux内核中的SPI
    Scala 基础 （四）：函数式编程【从基础到高阶应用】
    ABS新设海事软件公司ABS Wavesight™，引领船队运营驶入21世纪
  • 原文地址：https://blog.csdn.net/qq_55917018/article/details/127745273