小程序项目总结

时间:2021-01-27 13:21:38   收藏:0   阅读:0

生命周期

属性类型描述备注
onLoad function 生命周期函数--监听页面加载 一个页面只会调用一次。页面传值获取参数
onReady function 监听页面初次渲染完成 只调用一次,可以和视图层进行交互
onShow function 监听页面显示 每次打开页面都会调用一次
onHide function 监听页面隐藏 后台运行或跳转到其他页面时,触发
onUnload function 监听页面卸载 当返回键或者跳转删除记录时

onLoad -> onShow -> onReady

// 触发方法

属性类型描述备注
onPullDownRefresh function 监听用户下拉动作  
onReachBottom function 页面上拉触底事件  
onShareAppMessage function 用户单击右上角分享  

跳转

地址: https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBack.html

wx.reLaunch:关闭所有页面,打开到应用内的某个页面
redirectTo:关闭当前页,跳转到指定页;但是不允许跳转到 tabbar 页面
navigateTo:保留当前页,跳转到指定页小程序中页面栈最多十层。;
wx.navigateBack:关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

onUnload: function () {
    wx.redirectTo({
      url: ‘../index/index‘
    })
    wx.navigateTo({
      url: ‘../index/index‘
    })
    wx.reLaunch({
      url: ‘../../member/member‘
    })
  },

跨页面传值

  1. urL 传值:
// js. 文件的跳转带参数
 wx.navigateTo({ url: ‘/pages/source/index?id=‘ + novelId + ‘&type=‘ + type });
// wxml. 的跳转标签带参数
<navigator hover-class="none" url="/pages/catalog/index?id={{ novelId }}">详情</navigator>

接收值: 

  /**
   * 通过生命周期函数 的参数 options 接收到所传的参数
   */
  onLoad: function (options) {
   console.log(‘id =‘ + options.id);
  },
  1. 本地缓存:
### 缓存

    操作 	异步方法 	       同步方法
    插入 	wx.setStorage 	   wx.setStorageSync
    读取 	wx.getStorage 	   wx.getStorageSync
    删除 	wx.removeStorage   wx.removeStorageSync
    清空 	wx.clearStorage    wx.clearStorageSync
    获取(全部缓存信息)wx.getStorageInfo 	wx.getStorageInfoSync
    

// 存入缓存
wx.setStorage({ key: ‘firstLogin‘, data: true })
 // 获取缓存
const firstLogin = wx.getStorageSync(‘firstLogin‘);
  1. 全局 App
// app.js 页面
App({
    globalData: {
        openId:‘‘
    },
});

// js. 页面头部引入
const app = getApp();
// 获取
const openId = app.globalData.openId;

for 循环点击事件传参

##  wxml
// data-id="{{ item.id }}" 
// data-index="{{ index }}"
// data-prefix="{{ item.prefix }}"
传参 (只有这边传了参数下面event 里面才能接受到)

<i-swipeout i-class="i-swipeout-demo-item" wx:for="{{ list }}" wx:key="{{ index }}" wx:for-item="item" data-id="{{ item.id }}" data-index="{{ index }}" data-prefix="{{ item.prefix }}" bind:change="handleBtn" actions="{{ actions }}">
    <view slot="content">
      <navigator url=‘‘>
        <image class="book-images" src=‘https://bookcover.yuewen.com/qdbimg/349573/1011705052‘></image>
        <i-cell title="{{ item.title }}"></i-cell>
      </navigator>   
      <view class="trace">上次读到:{{ item.history.chapter.title }}</view>
      <view class="trace">更新时间:</view>
    </view>
  </i-swipeout>

  ## js
handleBtn: function (event) {
    const index = event.target.dataset.index;
    const novelId = event.target.dataset.id;
    this.likePass(novelId, index);
},

获取小程序表单提交

1.小程序获取fromId

form 标签上加入属性 report-submit=‘true‘
需要注意一点,开发工具里面是没办法查看到真实的 formId 的,会是这样一句提示:“the formId is a mock one”,提交给服务端就可以拿到了。
  1. 正常的表单方式提交
// wxml
<form bindsubmit="fromSub" report-submit=‘true‘>
  <i-input id="name" name="name"  type="textarea" title="作品名称:" placeholder="" />
  <button class="submit-btn" form-type="submit">提交</button>
</form>

// js.
fromSub: function (e) {
    console.log(e.detail);
},

// console.log(e.detail)
{value: {…}, formId: "the formId is a mock one", target: {…}}
formId:"the formId is a mock one"
target:{id: "", dataset: {…}, offsetTop: 553, offsetLeft: 0}
value:{name: "斗罗大陆"}
__proto__: Object
  1. data 数据监听方式
// wxml
<form bindsubmit="opinionSub" report-submit=‘true‘>
    <i-input value="{{ works }}" bind:change="inputWorks" type="textarea" title="作品名称:" placeholder="" />
    <button class="submit-btn" form-type="submit">提交</button>
</form>

// js.
inputWorks: function (e) {
    this.setData({ works: e.detail.works })
},

小程序自定义函数

// 在需要的页面顶部引入
<wxs module="common" src="../../utils/common.wxs"></wxs>
// module  文件名  src 文件的路径

{{common.subStrCut(introduce, 60)}}

// 使用时 common 文件下的 subStrCut 方法 

### common.wxs 

/**
 * 自定义过滤函数
 */
var filters = {
  /**
   * 字符串截取
   * 
   * str 需要截取的字符串
   * len 字符需要截取的长度
   * 
   */
  subStrCut: function (str, len) {
    return str.substring(0, len);
  },
}
// 输出对象
module.exports = {
  subStrCut: filters.subStrCut
}

小程序问题:

  1. 渲染比wxml 加载慢时会出现页面本应该影藏的元素
解决方案:标签上加入属性:  hidden="true"
  1. 页面堆栈出现的卡死
解决方案1: 尽量使用清除上级堆栈的跳转方式

解决方案2: 把堆栈中相同的页面的路径去除一个旧,留下新的,尽量减少层数(待定!)
  1. 小程序页面背景色修改
1.页面长度占不满一屏,就会出现上下颜色不相同
// wxss  修改整个页面的颜色样式
page { background-color: #fef2dc; }

2.页面长度占不满一屏,就会出现上下颜色不相同,如果是可切换的背景色上面的方法就不适用了(加一行代码就能解决)

// wxss 
.more-space {position:fixed; width: 750rpx; height: 200rpx; bottom: 1; z-index: 1}

// wxml 渲染标签同级添加的标签 切换的样式同渲染标签
<view class="more-space {{ isDark ? ‘dark‘ : ‘shield‘ }}"></view>
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!