精华内容
下载资源
问答
  • 小程序前端框架

    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 }...

    Tora UI 框架

    **1. 安装 Taro 脚手架工具**
    npm install -g @tarojs/cli
    
    **使用命令创建模板项目**
     taro init myApp
    
    **安装 Taro UI**
     cd myApp
     npm install taro-ui
    
    **引入**
    // page.js
    import { AtButton } from 'taro-ui'
    // 除了引入所需的组件,还需要手动引入组件样式
    // app.js
    import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
    

    Mint UI

    [使用手册](http://mint-ui.github.io/#!/zh-cn)
    
    框架展示很直观
    

    Vant框架

    [使用手册](https://youzan.github.io/vant/#/zh-CN/quickstart)
    组件多
    直观
    

    ##Vuex

    热加载  和数据交互
    

    Cube-ui

    颜色主题的框架
    

    饿了么框架

    新手最适用的框架
    

    前言
    刚开始写bolg,尝试记录一些日常。
    无意找了个很好看的小程序UI组件库:ColorUI github。
    之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方,正好这段时间有空,准备花点时间找一个较好的小程序组件库或者框架,来提示开发效率,以及能提高逼格- -
    准备
    百度了一堆,结果如下:
    组件库
    有赞UI组件库:vant webapp github
    适用商城类,简单的需求用这个也不错
    蘑菇街UI组件库:MinUI github
    挺好看的,但是搜出来使用这个的不多,可能我姿势不对吧
    TalkingData UI组件库:iView webapp github
    组件多…
    Wux WeApp UI组件库:Wux WeApp github
    好像是个人开发的,效果也不错,有日历手风琴等
    京东 UI组件库:Taro-UI github
    结合taro框架用react开发方式的,不适合
    ColorUI UI组件库:ColorUI github
    直接添加class即可实现效果,视觉效果很棒。
    前端框架
    美团点评:mpvue github
    使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
    京东:Taro github
    多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用
    腾讯:WePY github
    接近于 Vue.js
    WeTouch:Touch WX 文档
    小结
    框架:京东的是 React 方式编码,其他多数是vue方式。不考虑框架,因为都没用过,耗时多- -
    UI组件:看了issue和考虑大厂使用,选用vant webapp、iView webapp
    前前后后花了2,3天时间了解微信小程序的组件库和前端框架,本来准备使用mpvue的,但基于开源时间不是很长,自己不熟悉vue.js,怕自己爬不出坑放弃了,还是选择UI组件库。因为懒,选了组件较多的iView webapp,还有一个原因就是iview还有iview admin后台框架,万一哪天能用上呢~
    准备使用的是后台框架ASPNET MVC5.0+EASYUI+EF+WEBAPI,小程序前端选择iView webapp。当然还有好看的Color UI
    开始
    上面基本上都会用到npm;而且由于微信小程序写法也类似vue,加上选择的iView是基于vue.js的UI组件库,iView webapp使用方式与iView基本一致,所以还要学习了解一下vue.js。就这样准备使用iView webapp前,再研究研究node.js和vue.js咯,毕竟是奔着学习来的。
    网上找了一个文章,感觉不错,大致浏览,了解即可,毕竟这次目的是小程序。node.js入门

    展开全文
  • 初步解析小程序前端框架vant-ui源码

    千次阅读 2019-06-05 19:09:53
    初步解析小程序前端框架vant-ui源码 本学期的系统分析课程要求我们做一个小项目,我们以微信小程序为框架进行了项目的前端搭建,在UI上以开源组件库vant-ui为基础进行了设计,其中用到了许多该开源库的设计,对于...

    初步解析小程序前端框架vant-ui源码


    本学期的系统分析课程要求我们做一个小项目,我们以微信小程序为框架进行了项目的前端搭建,在UI上以开源组件库vant-ui为基础进行了设计,其中用到了许多该开源库的设计,对于项目前端起到了很大的帮助。

    组件库的使用教程在 https://youzan.github.io/vant-weapp/#/intro ,介绍说明比较详细且简单,因此这里不再赘述,这里希望对于框架的组成和实现方式进行初步的窥探。


    应用实例

    以Popup 弹出层为例,这个组件的实现功能如下图所示,可以实现在页面的各个位置以不同的方式弹出提示框选择框的效果

    • 效果
      在这里插入图片描述

    • 使用方法:

      • 引入组件
      "usingComponents": {
          "van-popup": "path/to/vant-weapp/dist/popup/index"
      }
      
      • 代码演示
      • 基础用法
      • popup默认从中间弹出
      <van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>
      Page({
      data: {
          show: false
      },
      
      onClose() {
          this.setData({ show: false });
      }
      });
      
      • 弹出位置
      • 通过position属性设置 Popup 弹出位置
      <van-popup
      show="{{ show }}"
      position="top"
      overlay="{{ false }}"
      bind:close="onClose"
      >
      内容
      </van-popup>
      
    • API

      参数 说明 类型 默认值
      show 是否显示弹出层 Boolean false
      z-index z-index 层级 Number 100
      overlay 是否显示背景蒙层 Boolean true
      position 可选值为 top bottom right left String -
      duration 动画时长,单位为毫秒 Number / Object 300
      custom-style 自定义弹出层样式 String ``
      overlay-style 自定义背景蒙层样式 String ``
      close-on-click-overlay 点击蒙层是否关闭 Popup Boolean true
      safe-area-inset-bottom 是否为iPhoneX留出底部安全距离 Boolean true
      safe-area-inset-top 是否留出顶部安全距离(状态栏高度 + 导航栏高度) Boolean false

    解析框架

    根据上面的例子可以看出,这个框架实现的功能以及可调用的接口还是比价丰富的,那么首先的问题是组件库是怎么知道调用哪个组件?

    • 在配置文件引入组件时,使用了"van-popup": "path/to/vant-weapp/dist/popup/index",这样wxml在解析对应的组件时,遇到van-popup就会调用对应的index的插入到wxml。下面会说明插入的index这个组件的组成成分。

    知道了对应的调用组件之后,组建内部是如何实现对应的效果的?

    • index内部文件组成:

      • index.wxss
        对应的css,除此之外,这里还引用了@import '../common/index.wxss'里面的css,不介绍
      • index.json
        配置文件,说明了这个组件库引用了另一个组件van-overlay,比较简单,不介绍
      {
          "component": true,
          "usingComponents": {
              "van-overlay": "../overlay/index"
          }
      }
      
      • index.wxml
      <wxs src="../wxs/utils.wxs" module="utils" />
      
      <van-overlay
          wx:if="{{ inited && overlay }}"
          mask
          show="{{ show }}"
          z-index="{{ zIndex }}"
          custom-style="{{ overlayStyle }}"
          duration="{{ duration }}"
          bind:click="onClickOverlay"
      />
      <view
          wx:if="{{ inited }}"
          class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
          style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }} {{ customStyle }}"
          bind:transitionend="onTransitionEnd"
          >
          <view wx:if="{{ safeAreaInsetTop }}" class="van-popup__safe-top" style="padding-top: {{ statusBarHeight }}px;"></view>
          <slot />
      </view>
      
      

      van-overlay是这个组件库的另一个组件,这里用来实现遮罩层的效果。

      这里的双括号{{}}里面的变量都由下面的index.js来控制,留意到这个wxml除了被index.js控制,还引入了/wxs/utils.wxs,前往utils.wxs查看,可以看见如下代码:

      var bem = require('./bem.wxs').bem;
      var memoize = require('./memoize.wxs').memoize;
      
      function isSrc(url) {
          return url.indexOf('http') === 0 || url.indexOf('data:image') === 0 || url.indexOf('//') === 0;
      }
      
      module.exports = {
          bem: memoize(bem),
          isSrc: isSrc,
          memoize: memoize
      };
      

      这里有个判断url属性的函数isSrc(),还引用了bemmemioze的函数,其中bem是一个命名格式,将输入统一成bem的风格,memioze用来处理缓存,返回一个装有对应函数的缓存。

      function memoize(fn) {
          var cache = {};
      
          return function() {
              var key = serializer(arguments);
              if (cache[key] === undefined) {
              cache[key] = call(fn, arguments);
              }
      
              return cache[key];
          };
      }
      
      

      memioze用于将bem函数装入utils.wxsbem里面,这个bemindex.wxml里面被调用,如下面,用于处理class的名字的处理拼接。

      class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
      

      总的来说,这个文件用于将API和调用转换为对应的class name,以此实现特定的css呈现效果。

      • index.js
        这个文件是对应的组件的显示、动画和控制逻辑代码。
      import { VantComponent } from '../common/component';
      import { transition } from '../mixins/transition';
      import { safeArea } from '../mixins/safe-area';
      VantComponent({
          classes: [
              'enter-class',
              'enter-active-class',
              'enter-to-class',
              'leave-class',
              'leave-active-class',
              'leave-to-class'
          ],
          mixins: [transition(false), safeArea()],
          props: {
              transition: {
                  type: String,
                  observer: 'observeClass'
              },
              customStyle: String,
              overlayStyle: String,
              zIndex: {
                  type: Number,
                  value: 100
              },
              overlay: {
                  type: Boolean,
                  value: true
              },
              closeOnClickOverlay: {
                  type: Boolean,
                  value: true
              },
              position: {
                  type: String,
                  value: 'center',
                  observer: 'observeClass'
              }
          },
          created() {
              this.observeClass();
          },
          methods: {
              onClickOverlay() {
                  this.$emit('click-overlay');
                  if (this.data.closeOnClickOverlay) {
                      this.$emit('close');
                  }
              },
              observeClass() {
                  const { transition, position } = this.data;
                  this.updateClasses(transition || position);
                  if (transition === 'none') {
                      this.set({ duration: 0 });
                  }
              }
          }
      });
      

      首先是VantComponent,这个是一个函数声明,没有包含任何的具体实现。

      declare function VantComponent<Data, Props, Watch, Methods, Computed>(
          vantOptions?: VantComponentOptions<Data, Props, Watch, Methods, Computed, CombinedComponentInstance<Data, Props, Watch, Methods, Computed>>
          ): void;
      

      与之类似,transitionsafeArea也只是函数的格式声明,没有任何的实现代码,具体的实现都在这个index.js文件。
      接着上面的说明,VantComponent在这个index.js进行了具体的定义,定义了classes mixins props created()methods,这里可以很明显的看出vue的风格,具体的原理可以查看vue对应的教程。这个函数实现了将本框架的特定字诸如vant-popup用基于vue的微信前端框架来解释和实现。

    总结

    总的来说,vant-ui是一个比较优秀的开源前端组件库,可以实现绝大多数的普通需求,用户在使用的时候也可以通过修改源码来实现自己的特定需求。如果说有什么不足之处,那就是css在设计的时候使用的单位都是px,没有一处是使用rpx这个单位,这个会造成组件在不同终端的显示的大小不能随终端而自我调整,希望可以在接下来的更新能有所修改。

    展开全文
  • 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。
  • mpvue (github 地址)是一个使用 Vue.js 开发小程序前端框架。 框架基于 Vue.js 核心,++mpvue 修改了 Vue.js 的 runtime 和 compiler 实现++,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js ...

    更新内容请点击访问我的博客

    概述

    mpvuegithub 地址)是一个使用 Vue.js 开发小程序的前端框架。
    框架基于 Vue.js 核心,++mpvue 修改了 Vue.js 的 runtimecompiler 实现++,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

    框架原理

    • mpvue 保留了 vue.runtime 核心方法,无缝继承了 Vue.js 的基础能力
    • mpvue-template-compiler 提供了++将 vue 的模板语法转换到小程序的 wxml 语法++的能力
      修改了 vue 的建构配置,使之构建出符合小程序项目结构的代码格式: json/wxml/wxss/js 文件

    生命周期

    生命周期

    结构介绍

    • src (项目源代码)
      • pages
      • app.json
      • main.js
      • app.vue
    • dist (生成的小程序代码)
      • wx (生成的wx小程序代码)
        • common
        • component
        • pages (页面文件代码)
        • static (静态文件代码)
        • app.js
        • app.json
        • app.wxss
        • sitemap.json

    全局页面

    app.vue

    
    
    <script>
      export default {
    
      }
    </script>
    
    <style>
    /*公共的样式*/
    </style>
    
    
    

    main.js

    import Vue from 'vue'
    import App from './app.vue'
    
    // 设置vue的提示功能关闭
    Vue.config.productionTip = false;
    
    // 声明当前组件的类型
    App.mpType = 'app'  // 应用
    
    
    // 生成应用的实例
    const app = new Vue(App)
    
    // 挂载整个应用
    app.$mount()
    
    

    当前页面

    index.vue

    <template>
      <div>
        <p>
          index 组件
        </p>
      </div>
    </template>
    
    
    <script>
      export default {
        data() {
          return {}
        }
      }
    </script>
    
    <style>
    
    </style>
    
    

    main.js

    /*
    * @Author: yujian95
    * @Date:   2019-06-07 11:45:40
    * @Last Modified by:   admin
    * @Last Modified time: 2019-06-07 20:04:52
    */
    
    import Vue from 'vue'
    import Index from './index.vue'
    
    const index = new Vue(Index)
    
    // 挂载当前的页面
    index.$mount()
    
    

    实践

    一个简单的登陆页面

    效果

    start.vue

    <template>
      <div class="startContainer">
        <img v-if="isShow" class="start_img" :src="userInfo.avatarUrl" alt=""/>
        <Button v-else class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo">解锁新世界</Button>
        <p class="userName">hello {{userInfo.nickName}}</p>
        <div v-if="isShow" class="unlock">
          <p>解锁新世界</p>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        data () {
          return {
            userInfo: {},
            isShow: false
          }
        },
        beforeMount () {
          console.log('--beforemount--')
          this.handleGetUserInfo()
        },
        // 存放所有的回调函数
        methods: {
          // 获取用户登录
          handleGetUserInfo () {
            wx.getUserInfo({
              success: (res) => {
                console.log(res)
                // 更新data中的数据
                this.userInfo = res.userInfo
                this.isShow = true
              },
              fail: () => {
                console.log('获取失败')
              }
            })
          },
    
          getUserInfo (res) {
            console.log('获取')
            console.log(res)
            if (res.mp.detail.rawData) {
              // 用户授权
              this.handleGetUserInfo()
            }
          }
        }
      }
    </script>
    
    <style>
      page {
        background: #0061b0;
      }
    
      .startContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    
      .start_img{
        width: 200rpx;
        height: 200rpx;
        border-radius: 100rpx;
        margin: 100rpx 0;
      }
    
      .userName{
        font-size: 40rpx;
        font-weight: bold;
        margin: 100rpx 0;
      }
    
      .unlock {
        width: 220rpx;
        height: 80rpx;
        border: 1rpx solid #eee;
        font-size: 24rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 10rpx;
        background: #eee;
      }
    
      .btn {
        width: 300rpx;
        height: 300rpx;
        border-radius: 150rpx;
        margin: 50rpx 0;
        line-height: 300rpx;
        text-align: center;
      }
    </style>
    
    

    main.js

    /*
    * @Author: yujian95
    * @Date:   2019-06-07 21:18:50
    * @Last Modified by:   admin
    * @Last Modified time: 2019-06-07 21:37:26
    */
    
    import Vue from 'vue'
    import Start from './start.vue'
    
    const start = new Vue(Start)
    
    // 挂载当前的页面
    start.$mount()
    
    

    main.json

    {
      "navigationBarBackgroundColor": "#0061b0",
      "navigationBarTitleText": "轮滑猫"
    }
    
    

    tip:

    • 尽量不要用小程序的生命周期函数
    • 缩进要求高,注意handleGetUserInfo ()括号前后的空格
    • console.log(),中要用单引号’,否则会报错
    • 连续俩行空行,也会报错.
    • 新建的页面要重新运行npm startnpm run dev

    参见

    展开全文
  • 微信小程序前端框架/UI组件

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

    前言

        刚开始写bolg,尝试记录一些日常。
        无意找了个很好看的小程序UI组件库:ColorUI github

        之前做的小程序小工具都是使用原生的自己编码的,难免会有东拼西凑的地方,正好这段时间有空,准备花点时间找一个较好的小程序组件库或者框架,来提示开发效率,以及能提高逼格- -

    准备

        百度了一堆,结果如下:

    • 组件库
    1. 有赞UI组件库:vant webapp github
      适用商城类,简单的需求用这个也不错
    2. 蘑菇街UI组件库:MinUI github
      挺好看的,但是搜出来使用这个的不多,可能我姿势不对吧
    3. TalkingData UI组件库:iView webapp github
      组件多...
    4. Wux WeApp UI组件库:Wux WeApp github
      好像是个人开发的,效果也不错,有日历手风琴等
    5. 京东 UI组件库:Taro-UI github
      结合taro框架用react开发方式的,不适合
    6. ColorUI UI组件库:ColorUI github
      直接添加class即可实现效果,视觉效果很棒。
    • 前端框架
    1. 美团点评:mpvue github
      使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
    2. 京东:Taro github
      多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用
    3. 腾讯:WePY github
      接近于 Vue.js
    4. WeTouch:Touch WX 文档
    • 小结
      框架:京东的是 React 方式编码,其他多数是vue方式。不考虑框架,因为都没用过,耗时多- -
      UI组件:看了issue和考虑大厂使用,选用vant webapp、iView webapp

        前前后后花了2,3天时间了解微信小程序的组件库和前端框架,本来准备使用mpvue的,但基于开源时间不是很长,自己不熟悉vue.js,怕自己爬不出坑放弃了,还是选择UI组件库。因为懒,选了组件较多的iView webapp,还有一个原因就是iview还有iview admin后台框架,万一哪天能用上呢~
        准备使用的是后台框架ASPNET MVC5.0+EASYUI+EF+WEBAPI,小程序前端选择iView webapp。当然还有好看的Color UI

    开始

        上面基本上都会用到npm;而且由于微信小程序写法也类似vue,加上选择的iView是基于vue.js的UI组件库,iView webapp使用方式与iView基本一致,所以还要学习了解一下vue.js。就这样准备使用iView webapp前,再研究研究node.js和vue.js咯,毕竟是奔着学习来的。

        网上找了一个文章,感觉不错,大致浏览,了解即可,毕竟这次目的是小程序。node.js入门


        iView只有PC端,只能转到vant这个UI组件了。

    展开全文
  • 曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代码提示以及真机调试方便,但是错误提示和代码格式化是硬伤,VS的前端报错提示很智能,代码格式化...
  • 一个不错的微信小程序前端框架

    千次阅读 2018-09-14 10:20:28
    https://github.com/moyanxiu/shopApp 分享一个微信商城的小程序,对于初涉微信开发的java开发人员,一个不错的选择。
  • 搭建vue前端框架或微信小程序vue框架步骤 1.下载node.js 下载地址:https://nodejs.org/en/download/ 查看node、npm版本,确保环境正确 node --version npm --version 2.安装vue脚手架工具vue-cli 若开发工具为...
  • 微信小程序框架 框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并...
  • 微信小程序商城框架小程序源码 带前端+后台+数据库 亲测可正常运行,后台框架清晰,适合二开和学习....
  • weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。如果你熟悉vue的语法,也可以使用wepy编写小程序,再通过weweb转换后将...
  • 我们来介绍一款由美团点评研发,使用 Vue.js 来开发微信小程序前端框架 ——mpVue。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。 用 Vue.js 开发小程序前端框架...

空空如也

空空如也

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

小程序前端框架