0%

微信小程序开发记录之一

Posted on Edited on In

🚗Wepy框架

  1. WePY中的methods的使用
    • 只能声明页面的bind、catch事件，不能声明自定义方法
    • 自定义方法应该跟methods平级
  2. this 运用
    小程序里修改data 里面的属性或者赋值都需要利用this.setdata()而wepy 基本就是利用this.属性即可。如果是异步返回或者更新dom需要this.$apply()触发脏值检测
  3. data使用注意点
    对于视图中需要用到的数据，应该事先在data中定义一下，哪怕此时没有数据，也应该定义一个空值
  4. 模板字符串换行问题 
    1
    `/page/line/itemList?sysno=${sysno}&deptid=${deptid}&isBan=1`
    在同一行中如果太长，需要换行，末尾最好在{处换行，不然如果刚好一个完整的${}在传递时 会产生空格。

    🚕微信小程序

    传参

    1、通过url链接传参
    小程序页面之间经常需要跳转，因而页面参数很是重要。
  5. url的基本形式就是domain/path?params，比如 www.baidu.com/home?a=1

    ？后面的是这个url携带的参数;
    a=1就是上面例子url携带的参数;

    多个参数通过&连接
  6. 举个例子
    1
    url="../home/babySchoolDetail/babySchoolDetail?detailType={{item.type}}&index={{item.index}}&readNumbers={{item.readNumbers}}&index={{item.index}}&date={{item.time}}"
    分析：
  • ？后面的就是他的params
  • 键值对就是以&号分割的
  • date= 这就是一个键值对

    在代码里面这个date需要通过代码获取的方式来取确定这个date的值，因为这个date很可能是变化的
  • 就是一个取值方式 在代码执行时它就会确定最终的实际值
  1. 一直出错的一点！

    url中传递的参数是 字符串 形式，所以在另一个页面使用时，记得数据类型！
1
① this.$redirect(`/orderPackage/pages/line/itemList?sysno=${sysno}&deptid=${deptid}&isBan=1`);
1
2
3
4
② const isBan = options.isBan || '';
   if (isBan === '1') {
   this.open = false;
}

例如上方的①中的isBan = 1 ，在②中使用的时候，因为是=== 所以千万要用字符串形式。

2、小程序数据缓存 进行传参

数据缓存·小程序文档
这次任务中涉及一些二次跳转判断问题，就用了本地存储setStorage

  1. wx.setStorage(‘key’，’data’) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容data，这是一个异步接口。
  2. wx.getStorage(‘key’) 获取本地缓存中对应的key。
  3. ！！！这点很重要

    wx.getStorage(‘key’)

    使用本地存储，在不需要的时候，要及时清除。不然会误影响。而且本地存储有大小限制
1
2
3
this.$db.Set('isFromBanner', '1');
const isFromBanner = this.$db.Get('isFromBanner');
this.$db.Remove('isFromBanner');

🚌CSS布局

Flex布局

flex布局·菜鸟教程

之前对于这个弹性布局使用不多，在工作中发现用到的地方特别多，也很方便，但是还需要多练习，目前还不够熟练。

  1. flex-direction

决定主轴的方向，即item排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse
2. justify-content

决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。
3. align-items

决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch

z-index堆叠

  1. 设置元素在z轴上面的堆叠顺序。
    拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
  2. z-index必须和==定位元素position:absolute|relative|fixed==一起使用，否则无效
  3. todo：目前的使用还是属于简单的，相对复杂的堆叠涉及父子关系，之后进一步学习

🚒善于利用工具

  • 微信开发者工具

    类似于Chrome 的控制台 的使用，微信开发者工具中的调试台，有很强大的作用，Console、Sources、Network、Storage、APPData。
  • 编译模式，可以自己配置参数，进行预览调试。一个页面需要的参数 可以在onload中查看，然后自行配置。

  • 有关Git

    VS Code对于git操作很是便利，但是因为粗心经常忘记了先拉取最新代码再进行合并分支，同事给我推荐了一款可视化操作的工具–sourcetree。

    免账户注册： https://segmentfault.com/a/1190000012104165

    参考资料：
    https://www.jianshu.com/p/f3bc0c8d9c06
    https://segmentfault.com/a/1190000005933855

🚑一些小坑

小程序中text的decode属性

小程序的text中无法使用转义字符，但是官方那个文档中给了几个常用的。

1
2
decode可以解析的有 
&nbsp; < > & &apos; &ensp; &emsp;
1
2
3
<view>
    <text decode="true">This is the first one! &nbsp; This is the second one!</text>
</view>

Less注意事项

  • 在将LESS代码编译为CSS代码之后，〜”some-text”中的任何内容将显示为 some-text 。

    eg:
    style.less
    p {color: ~”green”;}