微信小程序总结

2018-05-14 本文已影响102人 xurna

css

本地资源无法通过 WXSS 获取，
background-image：可以使用网络图片，或者 base64，或者使用image标签
能使用calc:height: calc(100% - 100rpx);
官方组件的样式可以通过!important覆盖

button组件默认都加了一个border，该button控件上有一个伪元素（::after），设置了border，只要把button::after 的border 属性去掉就可以了，

/*去掉按钮边框*/
button::after {
  border: 0;
} 
/*去掉button默认样式*/
button {
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  margin: 0;
}

修改radio框的样式:先把radio组件隐藏起来，自己写自定义样式和选中样式，再在data中设置一个选中的变量，来显示是否显示选中样式

<radio-group class="radioGroup" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}" wx:key="id">
    <!-- 自定义的radio样式 -->
    <view class='radioPoint'>
      <view class='radioDefault'>
        <view class="{{radioCheckVal==item.id?'radioActive':''}}"></view>
      </view>
    </view>
    <view class='radioText'> {{item.value}}</view>
    <!-- 隐藏默认的radio样式 -->
    <radio value="{{item.id}}" hidden="true" checked="{{item.checked}}" />
  </label>
</radio-group>

Page({
  /* 页面的初始数据 */
  data: {
    items: [
      { id: 1, value: '选项1' },
      { id: 2, value: '选项2' },
    ],
    radioCheckVal: null
  },
  radioChange: function (e) {
    this.setData({
      radioCheckVal: e.detail.value
    })
  },
})

在微信小程序内的文字无法长按复制，除了text节点以外。但要在text标签内加一个“selectable”属性。 <text selectable='true' ><text/>

js

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
3. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
小程序里面的打开的页面，请求需要是https协议，websocket协议需要是wss协议
按小程序右上角退出小程序和按home键退出微信，小程序里面的ws连接都不会断

小程序通过按钮点击分享，无法做到先发起网络请求获取某些信息再进行分享的功能，因为onShareAppMessage方法必须要return一个对象，不能放在wx.request回调里面return，必须事先获取。

//分享到个人/群判断方法
Page({
    onShareAppMessage: function () {
      //设置withShareTicket: true才能获取shareTickets信息
      wx.showShareMenu({
        withShareTicket: true
      })
      return {
        title: '分享标题',
        path: '/pages/index/index',
        imageUrl: '',
        success: (res) => {
          // 转发成功
          if (res.hasOwnProperty('shareTickets')) {
            // 转发到群
            wx.getShareInfo({
              shareTicket: res.shareTickets[0],
              success: (res) => {
                //encryptedData,iv发送给后台解密，获取到openGId
              },
              fail: function (res) {
                console.log('获取微信分享信息失败')
              }
            })
          }
          else {
            // 转发到个人
          }
        },
        fail: function (res) {
          // 转发失败
        }
      }
    },
  })

隐藏小程序导航栏方法，在app.json中配置navigationStyle：
```
{
  "pages": [],
  "window": {
    "navigationStyle": "custom"
  }
}
```
微信sdk分享的链接中不能含有中文字符，否则不能自定义分享，一定要把分享的链接encode一下
处理退出小程序的操作：目前没有提供这样的接口，但是可以用wx.navigateBack()做处理，将跳转层级设为最大跳转数量即可。wx.navigateBack({delta:20})
涉及到经常切换的需要用hidden来实现样式切换，不要用wx:if，用这个切换的时候会导致闪烁问题
自定义组件里面的wxss不会影响到页面的样式，所以不能继承自定义组件里面的样式

获取dataset:获取最外层dataset通过event.currentTarget.dataset就可以获取，里面的子元素就不用写上data-，而不用event.target.dataset获取

  <view class="btn" bindtap="tapNav" data-nav="1">
  </view>

  <view class="btn" bindtap="tapNav" data-nav="1">
    <view data-nav="2"></view>
  </view>

  // 读取当前执行事件的view data-nav值打印出来
  // 第一个打出1
  // 第二个如果点击的位置是子view的话，会打印出2.
  tapNav:function(event){
    console.log(event.target.dataset.nav) //2
    console.log(event.currentTarget.dataset.nav) //1
  },

生命周期执行顺序：onLoad->onShow->onReady
授权和登录是两回事。登录是用户无感知的，获取到code 和后端通信获得openid来定位用户。而授权才能获取用户头像和名字等信息
在不授权的情况下，可以通过open-data获取用户基本信息，在微信6.6.1版本中获取不了，并且基础库1.9.90版本才开始支持，遇到需要显示用户信息的地方还是需要手动授权，不能依赖于open-data。
```
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
```
无论是bindscrolltoupper 还是 bindscrolltoupper做上拉下拉刷新都需要注意这两个事件是会多次调用的。需要一个标识符来拦截多次调用。下拉刷新建议用 page 的
this.setData()修改数据是异步的，因此不能用它来做上下拉刷新的标识符
页面路径只能是五层，请尽量避免多层级的交互方式。

路由传递参数bug: 比较长的字符串作为参数应该放在最后。

  const TestUserData = {
    header: "https://pic.qiushibaike.com/system/avtnew/3422/34228569/thumb/20170914201113.JPEG?imageView2/1/w/90/h/90",
    name: "哈哈哈哈",
    text: "红鲤鱼和绿鲤鱼与驴",
  }
  // 跳转之后只能读取到header
  wx.navigateTo({
    url: `../result/result?header=${TestUserData.header}&name=${TestUserData.name}&text=${TestUserData.text}`,
  })
  // 跳转之后三个参数都能读取
  wx.navigateTo({
    url: `../result/result?name=${TestUserData.name}&text=${TestUserData.text}&header=${TestUserData.header}`,
  })

授权弹窗如果用户很久不响应的话，就会调用失败
transform: translate(0,100rpx);一个绝对定位的布局会撑开page节点
路由跳转bug:经过测试，因为页面跳转是有动画时效的，在动画进行中当前页面还能操作。如果双击当前跳转按钮机会进行两次跳转。第二次点击的时候小程序内置的路由栈是已经定位到了新的页面了，而这时候在按照原来的路由栈去定位当前页面，因此会报错。所以页面跳转按钮需要进行短时间多次点击的限制

素材

素材引入使用相对路径
支持image内src放置svg。但是不支持直接在wxml里面直接使用svg
录音音频，旧版的是silk格式,和公众号开发的时候一致。而新版可以自己选择aac

微信小程序总结

css

js

素材

猜你喜欢

热点阅读