微信小程序笔记

微信小程序笔记

官网

设置手机状态栏颜色

设置手机顶部状态栏字体颜色为白色

wx.setNavigationBarColor({
   frontColor: '#ffffff',/*颜色为白色  黑色为#000000*/
   backgroundColor: '#000000',
   animation: {
     duration: 300,
     timingFunc: 'easeIn'
    }
})

点击按钮分享好友，按钮显示为图片背景

分享按钮是图片
使用组件button 嵌套 image 实现

wxml

 <button open-type="share" class='btn_invitefriends'>
      <image class='btn_invitefriends_image' src="/src/images/index/btn_invitefriends.png"> </image>
 </button>

wxss

.btn_invitefriends {
  width: 100%;
  height: 105rpx;
  padding: 0;
  z-index: 2;
  background-size: 100%;
  margin-left: 0rpx;
  margin-right: 0rpx;
  border: none;
  border-radius: 40rpx;/*图片是圆角 按钮也设成圆角*/
}

button::after {
  border: none; /*设置button 无边框*/
}

.btn_invitefriends_image {
  width: 100%;
  height: 105rpx;
}

js

 /* 转发*/
  onShareAppMessage: function (ops) {
    var e = this;
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '',
      path: '/pages/index/index',
      success: function (res) {
        // 转发成功
        var shareTickets = res.shareTickets;
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  },

分享到好友 带参数

分享链接

分享当前玩家id ，其他玩家点击分享，通过id绑定用户间的关系
wxml

  <button class="addfriend" open-type="share">
      <image class="friendicon" src='/src/images/friends/add_friends.png'></image>
      <text class='addfriendlabel'>添加好友</text>
      <text class="tips">(好友越多能抢的红包越多)</text>
  </button>

js

 /* 转发*/
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops, ops.target)
    }
    return {
      title: '添加好友',
      path: "pages/index/index?fromid=" + JSON.stringify(1),
      success: function (res) {
        // 转发成功
        console.log("转发成功:" + JSON.stringify(res));
        var shareTickets = res.shareTickets;
        if (!shareTickets) {
          return false;
        }
        // //可以获取群组信息
        wx.getShareInfo({
          shareTicket: shareTickets[0],
          success: function (res) {
            console.log(res)
          }
        })
      },
      fail: function (res) {
        // 转发失败
        console.log("转发失败:" + JSON.stringify(res));
      }
    }
  },

获取参数

在pages/index/index 界面中index.js 的Onload 方法中获取参数

onLoad: function (options) {
  if (options.fromid ) {
       console.log(options.fromid);
    }
}

自定义导航栏

设置自定义导航模式

app.json

"window": {
    "navigationStyle": "custom"
  }

去掉了微信小程序自定义的导航

自定义自己的导航组件

创建自定义组件

创建组件文件夹components->mytabbar-> 右键点击->新建Component->mytabbar组件
生成mytabbar.js / mytabbar.json / mytabbar.wxml / mytabbar.wxss 四个文件

mytabbar.js

 // components/mytabbar/mytabbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
     text:{ //设置标题
       type:String,
       value: '',
     }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    //跳转游戏主页
    gotoHome: function () {
      wx.navigateBack({

      });
    }
  }
})

mytabbar.json

 {
  "component": true,
  "usingComponents": {}
 }
 ```
mytabbar.wxml
```xml
<!--components/mytabbar/mytabbar.wxml-->

  <view class='top'></view>
  <view class='navigation_top'>
    <image class="goback" src='/src/images/friends/back_icon.png' mode='aspectFit' bindtap='gotoHome'></image>
    <text class='title'>{{text}}</text>
 </view>




<div class="se-preview-section-delimiter"></div>

mytabbar.wxss

/* components/mytabbar/mytabbar.wxss */
.top{
  width: 100%;
  height: 3%;
  background-color: #000;
}
.navigation_top {
  display: flex;
  display: -webkit-flex;
  flex-flow: row;
  background-color: #000;
  width: 100%;
  height: 7%;
  align-items: center;
  position: relative;
}

.goback {
  width: 117rpx;
  height:70rpx;
   left: 0rpx;
  position: absolute
}

.title {
  width: 100%;
  color: white;
  font-size: 40rpx;
  text-align: center;
}





<div class="se-preview-section-delimiter"></div>

其他page引用mytabbar组件

page的json 中添加引用组件

{
    "usingComponents": {
      "mytabbar":"/components/mytabbar/mytabbar"
    }
}




<div class="se-preview-section-delimiter"></div>

page的wxml中使用组件

<mytabbar class="tabbar" text="好友"></mytabbar>

这样设置的手机状态栏颜色也是黑色，通过改变手机状态为文字为白色来显示手机状态栏