微信小程序里用到的一些小知识点

自己平时总用到，又总是想不起来，要到处找。所以汇总一下，方便找啦~~~
（PS：如果能有幸帮到哪位大兄弟或者小可爱那最好不过，有写的不对的地方请指正，一定及时改，有错望轻喷，蟹蟹 >﹏<）
1、跳转到客服页面：

<button open-type='contact'>联系客服</button>

2、button去掉边框：

button::after{border:none;}

3、用js控制标题栏的颜色：

原本是这样：

原图.png

    wx.setNavigationBarColor({
      frontColor: '#ffffff',//字体颜色
      backgroundColor: '#6788F9',//背景色
      animation: {},
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })

现在变成这样：

改变标题背景色和字体颜色之后.png

4、用js控制标题：

    wx.setNavigationBarTitle({
      title: '这是NavigationBarTitle',
    })

改变之后的结果：

改变标题之后.png

5、转发小程序：

<button  open-type="share" plain="true"  style='border:none'>转发</button>

onShareAppMessage: function() {
      return {
        title: '标题',
        path: '/zh_tcwq/pages/index/index',//打开的页面路径
        success: function (res) {
          // 转发成功
        },
        fail: function (res) {
          // 转发失败
        }
      }
    }

6、拨打电话

// 拨打电话
  call_phone: function () {
    var that = this
      wx.makePhoneCall({
        phoneNumber: that.data.dianhua//电话号码
      })
  },

7、小程序清空已选的checkbox多选框

 <view>{{item.name}}</view><checkbox value="{{item.id}}"  checked="{{checked}}"></checkbox>

然后把check设为false就可以

that.setData({
              checked:false
            })

8、view里英文和数字数字不换行

word-break:break-all;

加上这句就可以了。
9、只显示两行，超出的用省略号表示

  text-overflow:ellipsis;
  overflow:hidden;
  display:-webkit-box;
  text-overflow:-o-ellipsis-lastline;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  align-content:center;

效果如下：

只显示两行.png

10、处理从后台传来的富文本（即含有代码的一段文字）：

<rich-text nodes="<div style='color:#f00'>123</div>"></rich-text>

11、微信小程序有默认图片大小，要想图片保持原有比例，添加属性mode="widthFix"：

<image src='../../images/bg.jpg' mode="widthFix"></image>

12、把电话号码导入到手机通讯录：wx.addPhoneContact(Object object)
参考官文档：https://developers.weixin.qq.com/miniprogram/dev/api/device/contact/wx.addPhoneContact.html

微信小程序里用到的一些小知识点

推荐阅读更多精彩内容