微信小程序技巧_你需要知道的小程序开发技巧

更新日期: 2018-05-10阅读量: 1457标签: 技巧作者: 转载

一直以来进行了比较多的微信小程序开发... 总会接触到一些和官方组件或 api 相关或其无法解决的需求,于是决定在这里小小的整理一下自己的实现(次序不分先后)


自定义组件的使用

  • 创建 右键新建 Component

  • 引用 在你需要引用的文件的 json 中定义

"注释": "前面为组件名,后面为路径,这里仅供参考"

{
  "usingComponents": {
    "Menu": "../Components/Menu/Menu",
    "Loading": "../Components/Loading/Loading"
  }
}
  • 传入属性

在组件的 js 中定义你需要的属性名,类型及默认值

properties: {
  theme: {
    type: String,
    value: 'gray'
  }
  ...
},

注意 properties 为父组件要传入的数据,组件自身状态还是在 data 中

然后在 wxml 中引用即可

<Menu theme="{{theme}}"></Menu>


一键换肤

先创建一个 color.wxss 来存你的皮肤样式(文件名和位置随意)

/* 黑色主题 */
.bg-black{
  background-color: #363636;
}
.col-black-title{
  color: #ffffff;
}
.col-black-name{
  color: #c3c3c3;
}

class 名中必须带一个 标志 来区分不同主题,推荐使用颜色的英文名..然后在 app.wxss 中引用

// ~ 为你的文件路径
@import '~/color.wxss';

之后在 app.js 的 globalData 中定义一个字段储存你当前主题

globalData: {
  themeArr: ['gray', 'black', 'green', 'orange', 'pink', 'blue'],
  theme: 'black' // gray, black, green, orange, pink, blue
}

然后在js里引用 app.js ,然后在 onLoad 里获取 theme 后 setData 即可,这里贴上代码

<Menu theme="{{theme}}"></Menu>
<block wx:for="{{themeArr}}" wx:key="{{index}}">
  <view
    class="theme-view-item bg-{{item}} select-{{item == theme}}"
    bindtap='changeTheme'
    data-theme="{{item}}"
  ></view>
</block>
.theme-view-item{
  width: 80rpx;
  height: 40rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.select-true{
  transform: scale(1.2,1.2);
}
var app = getApp()

Page({

  data: {
    theme: '',
    themeArr: app.globalData.themeArr
  },

  onLoad: function (options) {
    this.setData({
      theme: app.globalData.theme
    })
  },

  changeTheme(e){
    var theme = e.currentTarget.dataset.theme
    app.globalData.theme = theme
    this.setData({
      theme: theme
    })
  }
})

这里你也可以使用 storage 来保存 theme


加载更多

使用 scroll-view

<scroll-view
  scroll-y
  bindscrolltolower='toLow'
  style="height: {{height}}px"
>

scroll-y 允许纵向滚动, bindscrolltolower 定义了滚动到底部时应该执行的函数, style 中使用了 js 中获取的屏幕可用高度

使用 scroll-y 需要指定 scroll 的高度

onLoad: function (options) {
  wx.getSystemInfo({
    success: (res) => {
      this.setData({
        height: res.windowHeight
      })
    }
  })
},
toLow(){
  this.setData({
    isLoading: true
  })
},

然后在 scroll 下面放你的 loading 组件就可以了..

<scroll-view
  scroll-y
  bindscrolltolower='toLow'
  style="height: {{height}}px"
>
  ......
  <view hidden="{{!isLoading}}">
    <Loading></Loading>
  </view>
</scroll-view>


下拉刷新

这个功能用到的都是官方的 api ,先在 app.json 中定义允许下拉刷新

"window": {
  ......
  "enablePullDownRefresh": true
}

然后在你的 js 文件中定义相应的函数

onPullDownRefresh: function () {
  ......
  wx.stopPullDownRefresh()
},

这个点可以看官方文档


自适应

rpx 单位是微信小程序中 css 的尺寸单位, rpx 可以根据屏幕宽度进行自适应,如在 iPhone6 上,屏幕宽度为 375px ,共有 750 个物理像素,则 750rpx = 375px = 750 物理像素, 1rpx = 0.5px = 1 物理像素

如果不懂的话不用考虑太多,在用 px 的时候将其大小翻倍使用 rpx 即可

【微信小程序】——rpx、px、rem等尺寸间关系浅析


阻止事件冒泡

假设有如下结构

<view class='A' bindtap='funcA'>
  <view class='B' bindtap='funcB'></view>
</view>

我们在 A , B 上定义了两个独立的点击事件,懂得事件冒泡的童鞋会发现,如果点击 B 的话,不仅会执行 funcB 还会执行 funcA ,那么如何避免这个问题?

很简单,只需要将不需要冒泡的的绑定函数改成 catchtap

<view class='A' bindtap='funcA'>
  <view class='B' catchtap='funcB'></view>
</view>


如何去掉Button的默认边框

将 button 自带的 position: relative 去掉即可


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/753

与开发团队高效协作的8个小技巧

开发团队是每一个产品经理和产品负责人的重要合作伙伴:是团队来设计和建造实际产品。但是,要高效地引导并与团队一起工作并不是一件容易的事情。这篇文章将分享8个使开发团队更高效合作的小技巧,从而提高创造成功产品的机会。

你应该知道的简单易用的CSS技巧

作为前端,在工作中难免会遇到关于排版的问题,以下是我整理的一些关于CSS的技巧,希望对你能有帮助。每个单词的首字母大写一般我们会用JS实现,其实CSS就可以实现。

5个很棒的JavaScript Promise技巧

Promise API改变了JavaScript的游戏。我们从滥用settimeout和解决同步操作到尽一切可能利用这个新的异步API。让我们来看看一些令人敬畏的Promise API技巧!

这些优化技巧可以避免我们在 JS 中过多的使用 IF 语句

最近在重构代码时,我发现早期的代码使用太多的 if 语句,其程度是我从未见过的。这就是为什么我认为分享这些简单的技巧是非常重要的,这些技巧可以帮助我们避免过多的使用 if 语句。

如何能提高CSS编写技巧?提高Web前端开发效率

如何能提高CSS编写技巧?怎么学好Web前端开发?很多人在学习Web前端时,刚开始都会学习HTML和CSS,HTML用于文本内容,CSS用于样式设计,掌握这两部分知识就可以进行简单的页面制作。不过如果耗时过长作品一般未免有些得不偿失

9个小技巧让你的 if else看起来更优雅

是不是很奔溃?虽然他是伪代码,并且看起来也很夸张,但在现实中,当我们无数次 review 别人代码时,都会发现类似的场景,那么我们本文就来详细聊聊,有没有什么方法可以让我们避免来写这么多的 if else 呢?

整理JS有用的技巧

这些技巧可能大家大部分都用过了,如果用过就当作加深点映像,如果没有遇到过,就当作学会了几个技巧。确保数组值;获取数组唯一值

11 个Js精简技巧

当我开始学习JavaScript时,我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。在这篇文章中,我将分享11条我认为特别有用的技巧

使用Js的一些小技巧

任何一门技术在实际中都会有一些属于自己的小技巧。同样的,在使用JavaScript时也有一些自己的小技巧,只不过很多时候有可能容易被大家忽略。而在互联网上,时不时的有很多同行朋友会总结

编程技巧:重构if...else if...else

新入职的公司,前人留下来一个项目,里面充斥着大量的if...else...,则倒是其次,主要连注释写的都很少。面对这样的已经上线的代码,我并没有想去重构他因为成本太高,只好鞭策自己不要写出这种代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!