小程序原生开发常用

独立页面设置顶部标题

index.json

  "navigationBarTitleText":"个人中心",

设置组件受页面wxss的影响

组件样式隔离 styleIsolation

通常公共样式写在app.wxss中，通常情况开发组件，组件与页面的样式是隔断的，所以会有“app.wxss的样式在组件不起效”的疑问。
设置 在 组件的 json 中设置

"styleIsolation":"apply-shared"

即可让app.wxss样式在该组件生效。
具体的其他情况的值设置，配置位置根据基础库也会有所区别，具体请看文档。

组件设置顶部title

组件生命周期attached设置：

attached:function(){
    wx.setNavigationBarTitle({
      title: '个人中心',
    })
  }

页面使用组件的method中的方法

页面中：

// wxml
<component-reset  id="componentReset" />

...
// js
onReady(){
	this.componentReset=this.selectComponent("#componentReset");
}

onShow(){
	this.componentReset.show();//使用组件的show方法
}

页面监听组件事件触发

// 组件
show(){
	  this.triggerEvent('showHandle');
}

//页面使用
<component-reset  bindshowHandle="showHandle"/>

页面A向页面B传值

// pageA.js
wx.navigateTo({
  url: 'pageB?id=1',
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromPageA', { data: 'pageA的数据' })
  }
})
// pageB.js
Page({
  onLoad: function(option){
    const eventChannel = this.getOpenerEventChannel()
    // 监听pageA的emit事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromPageA', function(data) {
      console.log(data) //  { data: 'pageA的数据' }
    })
  }
})

页面A接收来自页面B的值

应用在从A取B拿到值后，返回值到A页面并填充到对应的参数

// pageA.js
wx.navigateTo({
  url: 'pageB?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromPageB: function(data) {
      console.log(data)//  {data: item,msg:'pageB的数据'}
       this.setData({
            pageB:data
       })
    }
  }
})
//pageB.js  选中数据(selectItem)后传值并返回上一步
Page({
  selectItem(item){
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromPageB', {data: item,msg:'pageB的数据'});
     wx.navigateBack({
      delta: 1,
    })
  }
})

也可通过设置上一个页面属性向pageA传值：

 let pages = getCurrentPages(); //当前页面
      let prevPage = pages[pages.length-2]; //上一页面
      prevPage.selectBankNoCallback(info)// 触发上一个页面定义的方法 selectBankNoCallback

关闭索引提示

警告信息：

根据 sitemap 的规则[0]，当前页面 [pages/index/index] 将被索引

关闭配置：
project.config.json 中 "checkSiteMap"配置为false;

无效的 app.json permission[“scope.userInfo”]

原因：permission目前只需配置scope.userLocation

获取小程序的版本环境

 var ev=__wxConfig.envVersion;
		// console.log('版本:',ev)
		// 版本: ‘develop’, //开发版
		// 版本: ‘trial’, //体验版
		// 版本: ‘release’, //正式版

style动态

--width--: {{ viewWidth }}px

让view 垂直水平具中

父级设置：

display: flex;
  align-items: center;
  justify-content: center; //水平

动态改变data

 this.setData({
            [`pointsLocation.${'name'}`]: res[0]
          })

自定义导航

json

  "navigationStyle":"custom"

js

getTopTabH(){
     const _this=this;
      wx.getSystemInfo({
      success(res) {
        // 获取右上角胶囊的位置信息
        let info = wx.getMenuButtonBoundingClientRect()
        let CustomBar = info.bottom + info.top - res.statusBarHeight
        // let CustomBar = info.bottom 
        // console.log('设备信息',info,res,CustomBar)
        _this.globalData.topTabInfo={
          height:CustomBar,//这个基本就是顶部到胶囊下面的距离
          titleT:info.top,//标题的定位top位置
          titleH:info.height,//标题的高
          bottom:info.bottom,
        };
      }
    })
  },

获取base64图片数据

 chooseImageHandle(callback){
    wx.chooseImage({
      count: 1,
      sizeType:['compressed'],
      sourceType:['album', 'camera'],
      success:res=>{
        const imgPath=res.tempFilePaths[0];
        wx.request({
          url: imgPath,
          method:"GET",
          responseType:"arrayBuffer",
          success:base64Img=>{
            const base64=wx.arrayBufferToBase64(base64Img.data);
            callback(base64);
          }
        })
      }
    })
  },

picker 使用json时

 <picker bindchange="pickerChange" data-field="homeOwnship" data-option="homeOwnshipOptions" value="{{formData.homeOwnship}}" range="{{homeOwnshipOptions.arr}}" range-key="name">
              <view class="picker {{!formData.homeOwnship?'noPickerData':''}}">
                {{homeOwnshipOptions.obj[formData.homeOwnship]}}
              </view>
            </picker>

 const homeOwnship=app.globalData.homeOwnship;
    var homeOwnshipArr=[];
    for(var key in homeOwnship){
      homeOwnshipArr.push({id:key,name:homeOwnship[key]});
    }
    this.setData({
      homeOwnshipOptions:{
        arr:homeOwnshipArr,
        obj:homeOwnship
      }
    })

  pickerChange(e){
    const {field,option} = e.currentTarget.dataset
    this.setData({
        [`formData.${field}`]: this.data[option].arr[e.detail.value].id
    })
  },

收起键盘

      wx.hideKeyboard()

动画实现

<!--动画元素-->
<view animation="{{animationData}}">

  data: {
    animationData:{},
	}
	
//实现往上滑入 （下面使用的是height实现，用top也可以实现的  top 0 到100vh）
  open(){
    var animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'ease',
    })
    this.animation = animation;
    animation.height('100vh').step();
    this.setData({
      animationData:animation.export()
    })
  },
  //往下滑出
  close(){
    this.animation.height('0').step();
    this.setData({
      animationData:this.animation.export()
    })
  },

当实现内容高度不确定的
.Mask{// 底部
  height: 0;
  overflow-y: auto;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 2;
}

.MaskMain{ //内容
  position: absolute;
  left: 0;
  bottom: 0;//当需要内容充满弹窗，这里加top:0  或是直接将mask作为内容就好
  right: 0;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
}

自定义组件带slot

小程序也可使用类似vue的插槽slot

组件.wxml

 <view>
   暂无数据
    <slot name="content"></slot>
  </view>

组件.js
js这里Component的options参数必须要设置，否则使用的时候没有效果

 options:{
    multipleSlots:true
  },

使用：

<comNoData>
    <view slot="content">
        <text class="peimaryBg radiusLg">立即添加</text>
      </view>
  </comNoData>

阻止冒泡

catchtap 例如：

<view catchtap="saveImg" class=" button gradientPrimaryBg radiusLg centerText fl">保存图片</view>

图片path地址转base64

let base64Img =  'data:image/jpg;base64,' +  wx.getFileSystemManager().readFileSync(path, "base64")

canvas输出图片

 wx.canvasToTempFilePath({
    canvasId: 'canvasId',
    fileType: 'jpg',
    quality: 0.8, //图片质量
    width: canvasw,
    height: this.data.drawHtmlCanvasH,
    success: res => {
      this.setData({
        resCanvasImg:res.tempFilePath
      })
    }
  }, this)

canvas输出base64

此处用的是先输出path，再转base64

 let base64Img =  'data:image/jpg;base64,' +  wx.getFileSystemManager().readFileSync(path, "base64")