微信小程序相关

[itboos]

微信小程序官方文档

[itboos]

官方设计理念：https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0000a2739489c89b0086e2c305080a&highline=setData

[itboos]

小程序的坑:

1. 第二次进入页面的this问题；
2. button 去除边框需要：

button::after { 
   border :  none ; 
} 

3. button 可以指定plain 属性 ，可以去掉默认的样式官方文档
   https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000c424fe086a834c3c6e88c756800&highline=button%20%E6%A0%B7%E5%BC%8F
4. 下拉刷新在手机里只触发了一次，但是在调试工具里可以多次触发
   解决办法：

wx.stopPullDownRefresh 放在最前面, 每次下拉时先停止

onPullDownRefresh:  function  () {
   wx.stopPullDownRefresh(); // 先停止
   XXXXXXXXXXXXX其他代码
}

  // 清除button 的默认样式
  // 清除边框
  button::after {
       border :  none ; 
   }

  button {
    background: none;
    line-height: need px
    padding: 0;
    margin: 0;
 }
  

[itboos]

组件的mode属性的值中，关于widthFix的疑问：
文档里：宽度不变，高度自动变化，保持原图宽高比不变

imaage的宽度固定，高度按比例自动计算，比如说宽是200高是400，然后容器只有100，设置了widthFix，那宽度就是100，高度根据比例自动缩放，也就是 400 / 200 * 100 = 200

<image style="width: 100"></image>
图片实际宽高是: 200 * 400
容器里， 图片的宽度设置为100， 所以，按照等比例缩放， 图片的高度被设置为: 400 / 200 * 100 = 200
会自动加上height： 200 的行内样式,  这样就相当于图片等比列显示了

[itboos]

小程序实现瀑布流加载图片：https://github.com/zarknight/wx-falls-layout

[itboos]

有弹出层时（弹出层有滚动条），怎样禁止页面的滚动条

 需要设置样式。弹出层弹出的时候，有滚动条的那个节点添加 style="overflow:hidden;"的属性就可以了。

2.cover-view 上， 安卓手机不能根据z-index 来调整层级， 后面的cover-view 元素会把前面的cover-view 元素挡住， IOS 上则不影响。
解决办法: 层级更高的元素放在 后面， 后面渲染的就能显示在上面

[itboos]

WePY官方wiki常见问题
WePY根据环境变量来改变运行时的参数

[itboos]

小程序动态绑定class:（绑定多个class）

     1.  三目运算符：
      <view class="class1 class 2 {{ isTest ? 'a': 'b'  }} "></view>
     2. 绑定变量：（ 使用计算属性，返回一个字符串变量 ）, 变量的话，必须使用字符串
     <view class=" a b   {{ classObj }}  {{ myName }} "></view>

      classObj () {
          return 'c1 c2 '
      }
     data: 
        myName: 'xq'
    
     结果相当于：
     <view class=" a b   c1  c2 xq"></view>

[itboos]

微信原生组件 , 父组件无法改变 子组件样式的问题：

具体描述： 父组件的页面里 想通过css 样式来改变子组件的样式， 结果发现没有 生效
原因： 子组件使用的是shodaw DOM ， 外部样式无法对立面的内容生效

解决方法：
1. 在子组件里修改css
2. 父组件给子组件传class , 针对公共组件 里 部分样式不一样的问题

[itboos]

小程序样式的一些问题:

1. 小程序样式 引入需要使用相对路径(或者绝对路径)，不能使用别名如： "@/assets/css/a.less"

2.引入公共样式时，可以直接引入 .wxss, 不要引入.less，否则，每个页面都会有一份共同的 csss。
使用：
a:  @import (css) "../assets/css/common.wxss";

b:  @import "../assets/css/common.less";


a 方式是告诉编译工具，保留动态引入的方式(因为引入的是wxss,无需再编译)。即 页面.wxss 也是使用  @import (css) "../assets/css/common.wxss"; 这样的动态引入语法。
b 方式是，引入less文件，（less文件需要编译，），它的结果就是 把编译后的文内容复制到了对应的页面，导致的问题就是 多个页面都含有相同的wxss 内容，增大了文件的体积。


原理是，开发者工具实际上是在dist读取代码，动态编译的过程中，已经把 .less编译成了.wxss, 而且路径和src目录是一一对应的。
栗子：  
   引入公共样式： "../assets/css/common.less"
   会在dist目录里生成 assets/css/common.wxss, 所以，可以直接引入 wxss.
这样，打包后的.wxss 里， 就是保留了这句话，而不是把里面的代码复制一份过来，而是使用动态引入的方式。
这样，就缩小了文件体积。

[itboos]

picker-view中indicator-style没作用
有用的回答：

 直接在indicator-style属性中写：

1. border: 1px solid #000;  即可设置选中框的边框

2. background-color: red; z-index: 0; 即可设置选中框的背景颜色，这里多说一句，
之所以要设置z-index，是因为选中框的z-index在组件源码中被设置成了3，
也就是设置了背景色后会覆盖选中框的文字。

3. 如果想要设置选中框的字体颜色的话，不能通过indicator-style设置。

[itboos]

监听小程序从上一个页面返回

问题描述：
当用户从 a页面进入 b页面后， 用户点击返回按钮，返回到 a页面， 这时，我们 a页面的保留了进入b页面之前的所有状态，我们希望 a 页面初始化成一开始的状态

查看文档后发现，小程序并没有监听页面返回的事件， 从 b 页面返回 a页面，会触发onShow 方法，但是并没有携带任何参数

getCurrentPage 方法可以获得当前页面的路由栈， 从 b 返回 a， 页面栈已经没有a 页面的路由了

解决方案：

1. 页面设置一个标志位，当从 a页面进入b页面之前， 标志位置true, onShow 方法里判断标志位是否为true, 如果为true, 就认为 是从b 页面返回的，这个时候执行我们需要做的事情，然后把标志位置false

2. 页面重新加载的实现
   2.1 this.onLoad() 从新执行onLoad 方法， 这里发现，并不是页面的所有数据都初始化了
   2.2 使用路由从定向：
   wx.redirectTo(当前页面的url), 这样会从定向到当前页面，路由栈的信息也可以保持不变，整个页面会像刚进来时的状态， 缺点是： 页面会有一个返回的动作，不是很友好
   原文：
   mpvue中实现返回上一页刷新

[itboos]

小程序代码包压缩 策略＆方案

js压缩: 配置wepy-plugin-uglifyjs插件

json、wxml压缩： 配置wepy-plugin-filemin插件

less压缩： 配置wepy-compiler-less插件

图片压缩： 配置wepy-plugin-imagemin插件、TinyPNG

其中TinyPNG工具压缩效果非常可观，400KB的图片压到40KB不足为奇，并且画质感知上几乎无损。

[itboos]

wepy 框架

坑： repeat 标签渲染微信原生组件导致错误：

当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助 标签<repeat>，代码如下：

 <template>
    <!-- 注意，使用for属性，而不是使用wx:for属性 -->
    <repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
        <child :item="item"></child>
    </repeat>
</template>

但如果循环列表中渲染了微信原生组件的话，repeat 写法就会出现错误（可能是某个奇怪的错误），这个时候，就需要使用wx:for 原生的列表循环写法。
对于微信原生组件：
微信原生组件名不能大写

<template>
   <!-- 注意，使用for属性，而不是使用wx:for属性 -->
   <block wx:for="{{list}}" wx:key="index" item="item">
       <child item="{{item}}"></child>
   </block>
</template>

wepy 中使用原生组件绑定事件：

// 不用写用户自定义的监听事件，写了也没效果

   <click-behavior info = "{{ storesAdMap[item.boxId] }}" @addClick.user = "adClick">
        <view class="store-gift">
         </view>
   </click-behavior>

   <click-behavior info = "{{ storesAdMap[item.boxId] }}">
        <view class="store-gift">
         </view>
   </click-behavior>

 // 父组件在events 里 定义要监听的事件：
  {
    events: {
        adClick: (data) => {
              console.log('子组件的点击事件', data)
         }
     }
  }
 // 组件中触发事件：
 this.emit('adClick', {...params})

更新wepy 组件中使用原生组件的方式

    // 更新wepy 组件中使用原生组件的方式
  <click-behavior info = "item.info" @adClick.user = "adClick">
      <view class="store-gift" id = "{{item.id}}">
             <view class="store-gift-area">
                  <image class="store-gift-img" src="{{item.iconImg }}"></image>
               </view>
         </view>
  </click-behavior>
 // 或者：使用wx原生的组件监听方式，其实wepy编译后就是长这个样子
 <click-behavior info = "item.info" bind:adClick = "adClick"></view>

    // 父组件在events 里 定义要监听的事件：
   
methods: {
   adClick: (data) => {
        console.log('子组件的点击事件', data)
    }
 }
// 组件中触发事件：

 这样调用的原因是因为 wepy页面里，this 是wepy 封装了的一个实例，this.$wxpage 是原生的wx当前页面的实例，里面才有 triggerEvent 方法 (至少目前是这样： 2019-06-03)

this.$wxpage.triggerEvent('adClick',  {info: this.info})

[itboos]

wx.getNetworkType 在安卓和IOS 上表现不一致的问题

 wx.getNetworkType({
     success(b) {
        console.log('success:', b.networkType)
     }
 })
console.log('b')
// 现象：
// 在iOS 上， 先输出了 success 网络类型, 然后输出 b
// 在 开发者工具和安卓上： 先输出了 b , 然后输出了 success.
// 也就是说，获取网络状态的回调在 IOS 上是同步， 在安卓和开发者工具上是异步。
//  所以，先逻辑时， 不能假定 b 会比回调先执行，其它的API 也可能存在这个问题。