整理小程序的使用(持续更新)

微信小程序：截图组件welCropper，实现原理及其使用
类似于微信朋友圈发图

链接: https://segmentfault.com/a/1190000011307688

假数据: { id: 1, img: ‘https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640’ },

{ id: 2, img: ‘https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640’ },

? { id: 3, img: ‘https://images.unsplash.com/photo-1551446591-142875a901a1?w=640’ }

生命周期的使用:

// 小程序自有生命周期 (mpvue中可直接使用)

onLoad () {
	console.log('小程序 [page-blog] 生命周期: onLoad: 监听页面加载') 
},
onShow () {
	console.log('小程序 [page-blog] 生命周期: onShow: 监听页面显示') 
},
onReady () { 
	console.log('小程序 [page-blog] 生命周期: onReady: 监听页面初次渲染完成') },
onHide () { 
	console.log('小程序 [page-blog] 生命周期: onHide: 监听页面隐藏')
},
onUnload () {
	console.log('小程序 [page-blog] 生命周期: onUnload: 监听页面卸载') 
},
onPullDownRefresh () {
	console.log('小程序 [page-blog] 生命周期: onPullDownRefresh: 监听用户下拉动作') 
},
onReachBottom () {
	console.log('小程序 [page-blog] 生命周期: onReachBottom: 页面上拉触底事件的处理函数') 
},
onShareAppMessage () {
	console.log('小程序 [page-blog] 生命周期: onShareAppMessage: 用户点击右上角分享')
},
onPageScroll () {
	console.log('小程序 [page-blog] 生命周期: onPageScroll: 页面滚动') 
},
onResize () { 
	console.log('小程序 [page-blog] 生命周期: onResize: 宽高改变') 
},
onTabItemTap (item) {
	console.log('小程序 [page-blog] 生命周期: onTabItemTap: 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）') 
}

标签的使用:

video标签

// controls 开启插件
// title 为全屏时展示的顶部标题(controls开启为前提)
// poster 为视频封面(controls开启为前提)
<video class="video_box"
         src="https://nie.v.netease.com/nie/2019/0725/661eaccac9c7c9b9822ae3152002cee4qt.mp4"
         :title="detailData.title"
         :poster="detailData.img"
         controls
         >
</video>

input 标签

 <input type="text"
             confirm-type="search"
             placeholder="搜索..."
             v-model="content"
             @confirm="confirm()">

// confirm-type="search" 值为search可将键盘右下角'确定'变为'搜索', 有其它值
// send		右下角按钮为“发送”	
// search	右下角按钮为“搜索”	
// next		右下角按钮为“下一个”	
// go	 	右下角按钮为“前往”	
// done	 	右下角按钮为“完成”              

button标签

<button class="closeMsg_btn sublogin"
        open-type="getUserInfo"
        lang="zh_CN"
        @getuserinfo="getInfo">立即授权</button>

getInfo (data) {
   	console.log(data);
 }

input焦点

<input :auto-focus="focusStatus"
               :focus="focusStatus"
               class="functionbar_input"
               type="text"
               confirm-type="done"
               placeholder="我想说点什么..."
               v-model="text"
               @confirm="confirm">
// js    焦点data => 控制 focusStatus

// 获得焦点
     bindfocus () {
       this.focusStatus = true;
     },
// 失去焦点
     bindblur () {
       this.focusStatus = false;
    },

image标签

image组件默认宽度300px、高度225px

推荐使用 acaleToFill(撑满) , aspectFill(撑满, 图片不变形)
mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式 值 说明 缩放 scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素(有可能变形) 缩放 aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 缩放 aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。(会被裁剪,但不会变形)

缩放 widthFix 宽度不变，高度自动变化，保持原图宽高比不变 裁剪 top 不缩放图片，只显示图片的顶部区域 裁剪 bottom 不缩放图片，只显示图片的底部区域 裁剪 center 不缩放图片，只显示图片的中间区域 裁剪 left 不缩放图片，只显示图片的左边区域 裁剪 right 不缩放图片，只显示图片的右边区域 裁剪 top left 不缩放图片，只显示图片的左上边区域 裁剪 top right 不缩放图片，只显示图片的右上边区域 裁剪 bottom left 不缩放图片，只显示图片的左下边区域 裁剪 bottom right 不缩放图片，只显示图片的右下边区域

小程序富文本图片溢出处理 rich-text标签

const obj = res.data;
const result = res.data.content;
// 处理富文本img图片过大问题,替换图片标签属性
const content = result.replace(
    /<img/gi, '<img style="max-width:100%;height:auto;overflow:hidden;"');
obj['html'] = content;

API的使用

类似于DiLog窗口

	wx.showModal({
 	  title: '敬请期待',
      content: '',
      showCancel: false,
      success (res) {
        if (res.confirm) {
        //   console.log('用户点击确定');
          wx.navigateBack();
        }
      }
    });

// wx.showModal(Object object)
// 显示模态对话框
	wx.showModal({
        title: '提示',
        content: this.content,
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
	});
     

类似于toast窗口

// title: 文本	
// icon: 图标=> success(7个汉字长度)
// loading(7个汉字长度) none(两行)	 
// duration: 维持时间

wx.showToast({ title: '评论成功!', icon: 'none', duration: 2000 });

// 换行
wx.showToast({
  title: `有任何建议请联系我们\r\n期望得到您的认可!`,
  icon: 'none'
})

模拟对话窗口

// showCancel   是否显示取消按钮
// cancelText   取消按钮的文字，最多 4 个字符
// confirmText  确认按钮的文字，最多 4 个字符	
// cancelColor 	取消按钮的文字颜色，必须是 16 进制格式的颜色字符串
// confirmColor 确认按钮的文字颜色，必须是 16 进制格式的颜色字符串
// success 接口调用成功的回调函数 fail 接口调用失败的回调函数 complete 接口调用结束的回调函数（调用成功、失败都会执行）
	wx.showModal({
      title: '敬请期待,暂无内容',
      content: '提示的内容',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定');
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
    

锚点定位:

// 前往评论区
jumpcoment (value) {
   wx.pageScrollTo({ selector: '#comlist' });
},

业务逻辑

添加上拉触底事件
onReachBottom(){	
	console.log("加载更多")
}

一些业务逻辑

回退上一级页面 beforePage(返回页面同时需要刷新数据)

var pages = getCurrentPages(); //当前页面
var beforePage = pages[pages.length - 2]; //前一页
wx.navigateBack({
  success: function () {
    beforePage.onLoad(); // 执行前一个页面的onLoad方法
  }
});

刷新当前页

this.onLoad();
this.onReady();
带参返回上一级页面

// 当前页面
var pages = getCurrentPages();   //当前页面
var prevPage = pages[pages.length - 2];   //上个页面
// 直接给上一个页面赋值
prevPage.setData({
  params: this.data.params
});
wx.navigateBack({
  delta: 1
})


// 要跳转的页面
data: {
  params: null,
},

onShow: function () {
  let pages = getCurrentPages();
  let currPage = pages[pages.length - 1];
  // 将携带的参数赋值
  this.setData({
    params: currPage.data.params,
  });
}

—把搜索关键存储到本地
通过 wx.setStorageSync 存入本地

通过 wx.getStorageSync 获取本地的数据

小程序插件的使用

日历插件: JmedCalendar

小程序超体积 => 分包
(mpvue环境)
// 分包条件(依赖包): mpvue-loader:^2.0.0 webpack-mpvue-asset-plugin: ^2.0.0,
// webpack-mpvue-vendor-plugin: ^2.0.0

// 在pages文件下 创建分包目录,分包目录中放需要分包的目录
// 目录如下
pages 
	index
    log
    user
    	username
        userphone
        usercenter
    	
//  app.json配置如下
{
    "pages": [
        "pages/index/main",
        "pages/strategyindex/main",
        "pages/videodetail/main",
        "pages/yuludetail/main",
        "pages/peijiangdetail/main",
        "pages/fenghuoindex/main",
        "pages/fenghuotab/main",
        "pages/noveldetail/main",
        "pages/update/main",
        "pages/read/main",
        "pages/search/main",
        "pages/mytool/main",
        "pages/calculator/main",
        "pages/warehouse/main"
  ],
  // 分包配置 
  "subPackages": [
      {
          "root": "pages/usercenter/pages/",
          "pages": ["user/main", "message/main", "collection/main"]
      },
      {
          "root": "pages/recordbook/pages/",
          "pages": ["recordbook/main", "recordbooktab/main"]
      }
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "率土纵横",
    "navigationBarTextStyle": "black"
  }
}