小程序开发技术经验

1、颜色相关

整个程序的，在app.josn里面


  "window":{ 
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "小程序标题",
    "navigationBarTextStyle": "black"
  },

在当前页面的 js 文件中

wx.setNavigationBarColor({
    frontColor: this.param.frontColor,   // 页面顶部标题字体颜色
    backgroundColor: this.param.bgcolor  // 页面顶部颜色
})

在当前页面的json文件中

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light",
  "navigationStyle": "custom"
}

2、去掉底部菜单栏

wx.hideTabBar({
     success: function(){
        console.log("成功隐藏了底部菜单栏");
     }
})

3、动态获取手机的状态栏高度

let systemInfo = wx.getSystemInfoSync();
 
let pxToRpxScale = 750 / systemInfo.windowWidth; //px转换到rpx的比例
let fontSize = systemInfo.fontSizeSetting * pxToRpxScale;// 用户设置的字体大小
let statuHeight = systemInfo.statusBarHeight * pxToRpxScale; //状态栏的高度
let titleHeight = 44 * pxToRpxScale; //导航栏高度，这个一般是固定的

4、小程序中 event.target 和 event.currentTarget

event.currentTarget返回的是绑定事件的元素
event.target返回的是点击的元素节点

<view class='padd-space' catchtap='editAddress' data-id="{
   
   {item.id}}">
     <image src='../../images/edit.png'></image>
</view>

// 此时点击元素img，拿取不到 e.target.dataset.id，但 e.currentTarget.dataset.id 是可以拿到的

由此可见两者区分，如果想只拿取 e.target ，这样即可

<view class='padd-space' catchtap='deleteAddress'>
     <image src='../../images/delete.png'  data-id="{
   
   {item.id}}"></image>
</view>

5、

// 多个data-
data-value1="{
   
   {value1}}" data-value2="{
   
   {value2}}"  
event.currentTarget.dataset.value1 event.currentTarget.dataset.value2

// 多个值（逗号分隔）
data-values="{
   
   { {value1,value2} }}" 
event.currentTarget.dataset.values.value1 event.currentTarget.dataset.values.value2

data-values="{
   
   { [value1,value2] }}" 
event.currentTarget.dataset.values[0] event.currentTarget.dataset.values[1]

6、

wx.showActionSheet(Object object)
显示操作菜单

wx.makePhoneCall(Object object)
拨打电话

wx.addPhoneContact(Object object)
添加手机通讯录联系人。用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方式，写入手机系统通讯录

freeTell: function(){
    var that=this;
 	// 提示呼叫号码还是将号码添加到手机通讯录
 	wx.showActionSheet({
  		itemList: ['呼叫','添加联系人'],
  		success:function(res){
  			if(res.tapIndex===0){
   			// 呼叫号码
  				 wx.makePhoneCall({
  			 	 phoneNumber: that.data.phoneNum,
   				})
 			 }else if(res.tapIndex==1){
  				 // 添加到手机通讯录
  				 wx.addPhoneContact({
  					 firstName: 'test',//联系人姓名
  					 mobilePhoneNumber: that.data.phoneNum,//联系人手机号
   				})
  			}
  		}
 	})
  }

小程序开发技术经验

猜你喜欢