精华内容
下载资源
问答
  • 有赞小程序weui

    2017-11-14 16:03:30
    ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。 现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、...
  • 还是微信小程序项目,虽然有一些优秀的第三方组件,但是秉持高度还原UI设计稿的原则,没有直接在项目中使用。遇到一些类似的逻辑时,可以参考一下这些开源项目的实现方式。难的往往只是某一个点,有时候我们需要的...

    原文链接

    前言

    还是微信小程序项目,虽然有一些优秀的第三方组件,但是秉持高度还原UI设计稿的原则,没有直接在项目中使用。遇到一些类似的逻辑时,可以参考一下这些开源项目的实现方式。难的往往只是某一个点,有时候我们需要的只是一张地图(PS:来自硬派脱口秀节目《知识就是力量》)。

    开始

    为什么研究actionsheet组件?

    因为项目中设计较多的交互动画,想要自己同一封装,可多处使用。一方面可以减少代码量,另一方面可以将动画与逻辑分离,更易于管理。

    正文

    1. 首先,需要在github上下载vant-weapp的源码;
    2. 把项目clone或下载到本地,参照官方说明,编译出可运行的小程序代码;
    3. 使用微信编辑器打开项目,并把编译出的小程序源码拖进你喜欢的编辑器。

    actionsheet示例页面:

    actionsheet示例页面

    actionsheet页面代码:

    wxml:

    <demo-block title="基础用法" padding>
      <van-button bind:click="toggleActionsheet1">弹出 Actionsheet</van-button>
      <!-- 监听了close事件 show控制显示和隐藏 -->
      <van-actionsheet
        show="{{ show1 }}"
        actions="{{ actions }}"
        bind:close="toggleActionsheet1"
        bind:select="toggleActionsheet1"
      />
    </demo-block>
    
    <demo-block title="带取消按钮的 Actionsheet" padding>
      <van-button bind:click="toggleActionsheet2">弹出带取消按钮的 Actionsheet</van-button>
      <van-actionsheet
        show="{{ show2 }}"
        actions="{{ actions }}"
        cancel-text="取消"
        bind:close="toggleActionsheet2"
        bind:cancel="toggleActionsheet2"
        bind:select="toggleActionsheet2"
      />
    </demo-block>
    
    <demo-block title="带标题的 Actionsheet" padding>
      <van-button bind:click="toggleActionsheet3">弹出带标题的 Actionsheet</van-button>
      <van-actionsheet
        show="{{ show3 }}"
        title="标题"
        bind:close="toggleActionsheet3"
      >
        <view class="content">内容</view>
      </van-actionsheet>
    </demo-block>

    js:

    import Page from '../../common/page';
    
    Page({
      data: {
        show1: false,
        show2: false,
        show3: false
      },
    
      onLoad() {
        this.setData({
          actions: [
            { name: '选项' },
            { name: '选项', subname: '禁用' },
            { name: '选项', loading: true },
            { name: '禁用选项', disabled: true }
          ]
        });
      },
    
      // 设置隐藏  在最外层page里改变了show的值,触发transition.js中show的observer函数,导致所有的动画执行
      toggle(type) {
        this.setData({
          [type]: !this.data[type]
        });
      },
    
      // 调用方法
      toggleActionsheet1() {
        this.toggle('show1');
      },
    
      toggleActionsheet2() {
        this.toggle('show2');
      },
    
      toggleActionsheet3() {
        this.toggle('show3');
      }
    });
    

    在示例页面可以看出,是使用了van-actionsheet组件,那我们再去看看van-actionsheet组件的实现。

     

    van-actionsheet组件代码:

    <!-- 引入了van-popup组件 -->
    <van-popup
      show="{{ show }}"
      overlay="{{ overlay }}"
      close-on-click-overlay="{{ closeOnClickOverlay }}"
      custom-class="van-actionsheet {{ title ? 'van-actionsheet--withtitle' : '' }}"
      position="bottom"
      bind:close="onClose"
    >
      <!-- 这部分是作为van-popup组件的slot内容插入的 -->
      <view wx:if="{{ title }}" class="van-hairline--top-bottom van-actionsheet__header">
        <view>{{ title }}</view>
        <van-icon custom-class="van-actionsheet__close" name="close" bind:click="onClose" />
      </view>
      <view wx:else class="van-hairline--bottom">
        <view
          wx:for="{{ actions }}"
          wx:key="index"
          class="van-actionsheet__item van-hairline--top {{ item.disabled || item.loading ? 'van-actionsheet__item--disabled' : '' }} {{ item.className || '' }}"
          data-index="{{ index }}"
          bind:tap="onSelect"
        >
          <block wx:if="{{ !item.loading }}">
            <view class="van-actionsheet__name">{{ item.name }}</view>
            <view class="van-actionsheet__subname" wx:if="{{ item.subname }}">{{ item.subname }}</view>
          </block>
          <van-loading wx:else custom-class="van-actionsheet__loading" size="20px" />
        </view>
      </view>
      <view
        wx:if="{{ cancelText }}"
        class="van-actionsheet__cancel van-hairline--top"
        bind:tap="onCancel"
      >
        {{ cancelText }}
      </view>
      <view wx:else class="van-actionsheet__content">
        <!-- slot:可以自定义actionsheet内容 -->
        <slot />
      </view>
    </van-popup>

    在van-actionsheet组件源码中可以看出,组件内引入了van-popup组件,那我们再去看看van-popup组件的实现。

     

    van-popup组件源码:

    <!-- 引入了van-overlay组件 -->
    <van-overlay
      mask
      show="{{ overlay && show }}"
      custom-style="{{ overlayStyle }}"
      bind:click="onClickOverlay"
    />
    
    <!-- 真正的弹窗内容 -->
    <view
      wx:if="{{ inited }}"
      class="custom-class van-popup {{ position ? 'van-popup--' + position : '' }}"
      style="animation-name: van-{{ position }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }}"
      bind:animationend="onAnimationEnd"
    >
      <!-- slot: 可以自定义弹窗的内容 -->
      <slot />
    </view>

    组件van-popup内又引入了van-overlay组件,那再去看看van-overlay组件的实现。

     

    van-overlay组件源码:

    <!-- 好家伙,又是一个组件 -->
    <van-transition
      show="{{ show }}"
      custom-class="van-overlay"
      custom-style="z-index: {{ zIndex }}; {{ mask ? 'background-color: rgba(0, 0, 0, .7);' : '' }}; {{ customStyle }}"
      bind:tap="onClick"
    />

    组件中还是组件。。。再去看看van-transition组件的实现吧。

     

    van-transition组件源码:

    wxml:

    <!-- name值默认为fade, type值是取transition中的type值(enter/leave) -->
    
    <!-- 终于到头了~ -->
    <view
      wx:if="{{ inited }}"
      class="van-transition custom-class"
      style="animation-name: van-{{ name }}-{{ type }}; animation-duration: {{ duration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
      bind:animationend="onAnimationEnd"
    >
    <!-- 显示和隐藏通过控制display属性实现,绑定了动画结束的处理函数 -->
      <slot />
    </view>
    

    wxss: 该部分代码定义的是动画,代码过长,此处就不深入探究CSS动画的实现啦。

    js:

    // 引入behaviors
    import transitionBehaviors from '../behaviors/transition';
    
    Component({
      options: {
        addGlobalClass: true
      },
    
      externalClasses: ['custom-class'],
    
      // 类似于mixins和traits的组件间代码复用机制
      // 每个behavior一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior。behavior也可以引用其他behavior 。
      behaviors: [transitionBehaviors(true)],
    
      properties: {
        name: {
          type: String,
          value: 'fade'
        }
      }
    });

    transition.js:

    export default function(showDefaultValue) {
      return Behavior({
        properties: {
          customStyle: String,
          // 根据show的值判断是动画type是enter还是leave
          show: {
            value: showDefaultValue,
            type: Boolean,
            // 属性值被更改时的响应函数
            observer(value) {
              if (value) {
                this.show();
              } else {
                this.setData({
                  type: 'leave'
                });
              }
            }
          },
          duration: {
            type: Number,
            value: 300
          }
        },
    
        data: {
          type: '',
          inited: false,
          display: false
        },
    
        attached() {
          if (this.data.show) {
            this.show();
          }
        },
    
        methods: {
          show() {
            this.setData({
              inited: true,
              display: true,
              type: 'enter'
            });
          },
          // 动画结束,只修改了display
          onAnimationEnd() {
            // 如果false, 就隐藏
            if (!this.data.show) {
              this.setData({
                display: false
              });
            }
          }
        }
      });
    }
    

    总结

    很细的组件化开发,分工明确,耦合度低。对behavior进行了同一的管理,组件behaviors+observer的结合使用,完美~

    之前参考vant-weapp slider组件的实现,自己做了一个双向滑动的slider,收获颇多。致敬这些优秀的开源项目,致敬那些优秀的程序员~路还长

    笔记笔记笔记 

    嘘寒问暖 不如打笔巨款~

    展开全文
  • 注意:在使用ui框架的时候,需要使用npm管理: 先创建package.json 指令: npm init -y 以下为微信官方weui的使用步骤 利用npm来安装包 指令:npm install weiui-miniprogram --save 勾选开发者工具中顶部详情中...

    注意:在使用ui框架的时候,需要使用npm管理:

    • 先创建package.json
    • 指令: npm init -y

    以下为微信官方weui的使用步骤

    1. 利用npm来安装包
      指令:npm install weiui-miniprogram --save
    2. 勾选开发者工具中顶部详情中的npm选项
    3. 点击左上角工具进行构造npm
    4. 在app.wxss中引入
      @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
    5. 接着把需要用到的组件 在使用页面的json中usingComponents里进行配置
    {
      "usingComponents": {
        "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
      }
    }   // 举个例子
    

    有赞@vant

    1. 在终端下载 :
        npm i @vant/weapp -S --production
    
    1. 工具:点击左上角工具进行构造npm
    2. 接着把需要用到的组件 在使用页面的json中usingComponents里进行配置
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }  //举个例子
    
    展开全文
  • 简介:  mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择。mpvue从底层支持 Vue.js 语法和构建工具体系,... 3、使用ZanUI:有赞团队的小程序版UI组件库(GitHub)  4、使用vue
  • 基于H5 IM小程序 UI框架选型 选型标准: 1. 便于后面项目小程序 app等改造 2. 开发轻便 3. 学习成本低 4. 框架生态完整 一、方案确定 方案1 (使用原生HTML+CSS实现) 优点 :    1. 原因项目改造成本低...

    基于H5 小程序 UI框架选型

    选型标准:

    1. 便于后面项目小程序 app等改造
    2. 开发轻便
    3. 学习成本低
    4. 框架生态完整
    

    一、方案确定

    方案1 (使用原生HTML+CSS实现)

    优点 :

       1. 原因项目改造成本低(后续别的项目需要直接将.vue文件复制粘贴过去就能使用)

       2. 如果样式不统一,只需要更改少量CSS样式即可达到目的

       3. 基于H5的小程序兼容性问题,使用UI框架打包后也是基于HTML+CSS+JS来达到目的

    缺点 :

       1. 前期开发成本较高(人天等方面)

    方案2(选用UI框架)

    优点 :

       1. 前期开发时间较低

       2. 不需要怎么写更改样式,开箱即用

       3. 如果别的项目小程序UI框架未选型,则直接使用即可

    缺点 :

       1. 如果别的项目小程序或APP的UI框架已选型,并且不是我们选用的UI框架,则需要再次安装一个UI框架(可能会出现一些不可预知的问题 比如CSS过渡效果等)

    二、UI框架选型(方案一是基于原生HTML+CSS实现所以不参与UI框架选型):

    1. 滴滴ui: https://didi.github.io/cube-ui/
    2. vant ui: https://youzan.github.io/vant 有赞前端团队(用于商城的更多)
    3. vux https://doc.vux.li/zh-CN/ (WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。)
    4. NutUI http://nutui.jd.com/#/intro (京东前端开发库)
    5. https://github.com/fex-team/GMU上 (百度GMU小组开发,基于开源BSD协议 --停止更新(没官网))
    6. https://gitee.com/mirrors/AKjs.Mobile (基于jQuery的一个轻量级前端框架)
    7. https://gitee.com/mirrors/Mint-UI(饿了么 基于vue的小程序UI框架 停止更新238个问题未修复)
    8. https://github.com/jaunesarmiento/fries (停更 适用于仅使用HTML,CSS和原生JS的Android应用程序)
    9. https://gitee.com/mirrors/NowUI (NowUI 是一款基于 React 的移动端 UI 组件框架)
    10. https://gitee.com/antv/f2 (主要用于移动端图表渲染)
    11. https://gitee.com/mirrors/better-scroll (BetterScroll 是一款重点解决移动端各种滚动场景需求的插件)
    12. https://gitee.com/mirrors/TouchUI (虽然是基于vue开发的,但是看官网文档说明,它是需要单独配置开发环境。)
    13. https://gitee.com/mirrors/nutui (一套京东风格的轻量级移动端Vue组件库)
    14. https://github.com/thebird/Swipe (项目已经没用了)
    15. https://gitee.com/mirrors/Atom-Design (打不开文档)
    16. https://github.com/JackJiang2011/MobileIMSDK/releases/tag/4.0.2 (移动端IM通信层框架 Apache2.0开源许可)
    17. https://gitee.com/hxyl/vue-mb-touch (长距离内可触发事件插件)
    18. https://gitee.com/didiopensource/mand-mobile/tree/v2.0.0 (移动端IM通信层框架 Apache2.0开源许可)
    19. https://github.com/angular-ui/bootstrap (Bootstrap的本机AngularJS(Angular)指令)
    20. https://uniapp.dcloud.io/ (使用 Vue.js 开发所有前端应用的框架 可发布到iOS、Android、H5、以及各种小程序)
    21. https://github.com/TalkingData/iview-weapp (iView Weapp iView 适用于小程序的UI)

    这里只对基于VUE并且是大厂的几个进行排列

    名称cube-uivant uiNutUIGMUMint-UIuniapp
    社区活跃度较完善较完善较完善停止更新停止更新完善
    开发公司滴滴有赞前端团队京东百度GMU饿了么DCloud
    网站https://didi.github.io/cube-ui/https://youzan.github.io/vanthttp://nutui.jd.com/#/introhttps://github.com/fex-team/GMUhttps://gitee.com/mirrors/Mint-UIhttps://uniapp.dcloud.io
    示列
    是否停更
    start8.3k14.9K2.3K1.1K16K25.3K

    三、核心框架选型对比:

    Image text

    1. uniapp (https://uniapp.dcloud.io/)

    一套代码,运行到多个平台
    uni-app实现了一套代码,同时运行到多个平台;如下图所示,一套代码,同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具(底部8个终端选项卡代表8个终端模拟器)
    官网图片

    2. cube-ui (https://didi.github.io/cube-ui/)

    ​ 使用少,没找到多少事例
    ​ 团队维护
    ​ 支持后编译
    ​ 常规支持:多语言、自定义主题、按需引入
    ​ 文档详细,组件齐全
    ​ 扩展性强,可以方便地基于现有组件实现二次开发
    ​ 适合移动端需要扩展的项目,或者引用框架部分源代码组合成自己的 ui 组件库

    3. vant ui ( https://youzan.github.io/vant)

    更多适用于移动商城开发,
    vant ui有h5版和微信小程序版。其h5版只能用于h5,其微信小程序版(vant weapp)可用于微信和App

    优势:版本升级最勤快,开发团队实力最强,组件数量足以应对交互不多的APP。
    
    劣势:组件数量不是最多的,画面比较糙。
    

    4. iView Weapp ( https://github.com/TalkingData/iview-weapp )

    ​ 组件数量跟Vant相当,但是没有任何选择器,比如没有时间选择器,也没有树形选择器等等。

    ​ 比较特色的是“抽屉”,也就是从屏幕某侧伸出来一个浮层,可以作为菜单使用。

    优势:iView 的 webapp版本  主要用于微信小程序
    
    劣势:缺少选择器组件,如果你很需要这个组件,那么你可能要放弃iView。
    

    第四阶段(框架推荐):

      推荐使用uniapp 使用广,生态完善,兼容性强
    

    选型总结:

    1. vant 更加适用于移动商城开发
    2. iview weapp 主要还是用以PC端为主
    3. uniapp 使用例子多,生态完善,兼容性强
    
    展开全文
  • 快速搭建微信小程序开发框架

    千次阅读 2019-05-17 10:18:26
    点击打开微信开发者工具 点击小程序项目 点击下面的加号 新建小程序项目 选择项目目录、点击小程序使用AppID,输入项目名称,点击确定

    点击打开微信开发者工具

    点击小程序项目

    点击下面的加号

    新建小程序项目

    选择项目目录、点击小程序使用AppID,输入项目名称,点击确定

    展开全文
  • 1. 基于微信小程序的招聘资讯发布平台的设计与实现 1.1. 微信:fuckingjava 1.2. 系统描述 项目前端基于微信小程序,使用技术:mpvue、Vant、AntV 后端基于Spring Boot、myBatis、Redis, DB使用mysql 1.3. 系统功能...
  • 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让...
  • 微信小程序好用的开源框架

    千次阅读 2018-09-30 10:58:45
    由于小程序开发的火爆,大家都在致力于探索如何更好的,更加高效的开发小程序,以至于很多公司都贡献了小程序开源框架和组件库。 比如我列举一些: 开源框架 1、 mpvue mpvue 是美团点评开源的一...
  • 微信小程序UI框架

    2021-07-27 10:45:38
    适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具,猛戳这里(Min-Cli 使用文档)详细了解如何使用吧。 优点:UI框架比较小,比较简洁 缺点: 组件很少,基本没有维护了 5. ...
  • 在逛gitee的时候,看到gitee年度最有价值开源项目之一“vant”,站在一个有着很长一段时间的小程序开发人员而言,使用过的那么多UI组件中,Vant算是我觉得更满足现在前端组件化的微信小程序UI组件库了。(当然vant还...
  • 微信小程序+UI框架

    2021-02-28 22:28:48
    小程序基础样式库、star数为截至2021年1月27日统计 ColorUI 1、start 10.1k 2、鲜亮的高饱和色彩,专注视觉的小程序组件库 3、GitHub 地址:https://github.com/weilanwl/ColorUI 4、开发文档参考(编辑中):...
  • ZanUI-WeApp是有赞移动 Web UI 规范 ZanUI 的小程序现实版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、...
  • 小程序前端框架

    2020-06-29 14:30:12
    Tora UI 框架 **1. 安装 Taro 脚手架工具** npm install -g @tarojs/cli **使用命令创建模板项目** taro init myApp **安装 Taro UI** cd myApp npm install taro-ui **引入** // page.js import { AtButton }...
  • 最近开发小程序使用了有赞的ui库,weapp,在用到Toast 轻提示组件时遇到了一个小坑,在这记录一下 首先官方给了使用的代码演示 然后按照他给的引入方式 在项目中却报错了 研究了一下发现官方给的引入路径有问题 ...
  • 最近开始毕业设计了,根据需求文档,我们需要使用小程序的微信运动API,写一个运动类APP,所以我就开始查询小程序相关的文档与社区。 微信小程序才刚刚起步,生态不能说很丰富,但是依然有很多优秀的开源项目: ...
  • 强烈推荐:绝对是最好的一个小程序开源框架

    万次阅读 多人点赞 2018-07-26 08:00:00
    【回复“1024”,送你一个特别推送】特别说明:这是我目前在接触过和使用过的,自认为是最好用的一个小程序开源框架库。小程序到底有多火,看看目前推出的开源框架以及组件库就知...
  • 微信小程序开发,页面编写占比较高,熟悉 html 和 css 的同学,建议直接使用 html+css ,不熟悉的同学则可以使用下面任意一个UI框架 ,就像在报修小程序中,我们是有使用了一点 iView WeApp 。 下面我总结一下市面...
  • 小程序vant-weapp框架的引入

    千次阅读 2019-09-24 17:37:10
    为大家介绍一下小程序的ui框架基于有赞开发一个框架,关于它的安装和使用接下来都会介绍到。 先介绍一下人家的官网vant-weapp 注意的是小程序的是vant-weapp,有赞的还有一个移动端ui框架vant-app。 有两种安装方法...
  • 最热门的微信小程序 UI 组件库 大家在开发微信小程序的过程中,选择一款高大上且好用的UI组件库,可以达到事半功倍的效果。目前,网上已有不少开源的小程序 UI组件库,但选择太多往往让人眼花缭乱,纠结,下面小编就...
  • 项目说明 ...项目目的是使用 微信小程序 来与蓝牙设备进行通讯。 2018年5月10日15:12:11 完成了基础功能的实现与界面的美化 使用了有赞的UI框架 优化了蓝牙的搜索逻辑,更省电。 增加了蓝牙强度显示的功能
  • Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前,请确保你已经学习过...
  • vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件均指的是此组件库中的弹框。 弹框分类 vant-weapp中弹框主要分为**两大类:弹出层...
  • WeiPHP5.0,公众号与小程序结合的最佳开发框架 介绍 WeiPHP5.0是一个开源,高效,简洁的移动应用系统,它实现一个后台同时管理和运营多个客户端(公众号,微信小程序,后续将支持支付宝小程序,百度小程序等) ...
  • 框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。使用 mpvue 开发小程序,你将在小程序...
  • 微信小程序前端框架/UI组件

    千次阅读 2018-11-12 14:05:32
     之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方,正好这段时间有空,准备花点时间找一个较好的小程序组件库或者框架,来提示开发效率,以及能提高逼格- - 准备  百度了一堆,结果如下: ...
  • 小程序常用ui库 组件库

    千次阅读 2018-10-18 10:44:28
    1、腾讯出品 Github:https://github.com/Tencent/weui ...   2、美团小程序框架mpvue Github:https://github.com/Meituan-Dianping/mpvue 官网: http://mpvue.com/   3、组件化开发框架wepy...
  • 1.微信小程序UI框架记录 uview 关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于...
  • 小程序 + APP + 公众号 + 头条+ 生活号 + 百度小程序 注重界面美感与用户体验,打造独特电商系统生态圈 演示地址:http://www.laiketui.com/action/ 软件架构 PHP5.6+ MYSQL5.5+ 自主研发框架 安装教程 ht...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,437
精华内容 574
关键字:

有赞小程序框架