小程序项目总结

标签：rom   --   返回   页面   wip   事件   https   Nid   tabbar   

生命周期

onLoad -> onShow -> onReady

// 触发方法

跳转

地址： 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);
  },

2. 本地缓存：

### 缓存

    操作 	异步方法 	       同步方法
    插入 	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‘);

3. 全局 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”，提交给服务端就可以拿到了。

2. 正常的表单方式提交

// 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

3. 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"

2. 页面堆栈出现的卡死

解决方案1： 尽量使用清除上级堆栈的跳转方式

解决方案2： 把堆栈中相同的页面的路径去除一个旧，留下新的，尽量减少层数（待定！）

3. 小程序页面背景色修改

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>

小程序项目总结

标签：rom   --   返回   页面   wip   事件   https   Nid   tabbar   

原文地址：https://www.cnblogs.com/tirybk/p/14328870.html