精华内容
下载资源
问答
  • 微信小程序UI框架

    千次阅读 2019-10-01 09:49:39
    微信小程序UI框架,快速解决微信小程序前端开发。 1.WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。 GitHub地址:https://github.com/Tencent/weui-wxss 2....

    微信小程序UI框架,快速解决微信小程序前端开发。

    1. WeUI WXSS

    WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。

    GitHub地址:https://github.com/Tencent/weui-wxss

    2. iView WeApp

    iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。

    GitHub地址:https://github.com/TalkingData/iview-weapp

    3. ZanUI WeApp

    ZanUI WeApp是有赞移动 Web UI 规范 ZanUI 的小程序实现版本,结合了微信的视觉规范,为用户提供更加统一的使用感受。

    现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、tooltips 等组件或元素。

    GitHub地址:https://github.com/youzan/zanui-weapp

    4. MinUI

    MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。

    GitHub地址:https://github.com/meili/minui

    5. Wux WeApp

    Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。

    GitHub地址:https://github.com/wux-weapp/wux-weapp

    6. ColorUI

    ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!

    其组件在美观性方面比较突出。

    GitHub地址:https://github.com/weilanwl/ColorUI

    以上UI框架出自一斤代码,遵循MIT开源协议,本文仅作记录,侵权请联系作者。

    7. XView

    XView小程序组件库本着简单易用的原则封装组件,使用时只需要在json配置文件中引用即可

    • 基于微信小程序自定义组件封装
    • 核心功能组件化
    • 简化使用

    GitHub地址:https://github.com/xwzj12138/Xview

    8. Lin UI 

    Lin UI是基于微信小程序原生语法实现的组件库。遵循简洁,易用的设计规范。

    GitHub地址:https://github.com/TaleLin/lin-ui

    9. TouchUI

    TouchUI是一套高质量移动端UI框架。基于vue.js框架,打造了上百种的移动端UI组件,实现拿来即用,像搭积木一样开发移动应用。 通过借鉴微信小程序的思想,Touch UI设计了与微信小程序相似的开发方式和API,希望通过这种方式降低学习成本,让任何水平的开发者都能做出精美应用。

    GitHub地址:https://github.com/uileader/touchui

    本文持续更新...

    展开全文
  • 1.微信小程序UI框架记录 uview 关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于...

    1.微信小程序UI框架记录

    uview

    关于uView的取名来由,首字母u来自于uni-app首字母,uni-app是基于Vue.js,Vue和View(延伸为UI、视图之意)
    同音,同时view组件uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-app和Vue之意.兼容安卓,iOS,微信小程序,H5,QQ小程序,百度小程序,支付宝小程序,头条小程序60+精选组件,功能丰富,多端兼容,
    让您快速集成,开箱即用众多贴心的JS利器,让您飞镖在手,召之即来,百步穿杨众多的常用页面和布局,让您
    专注逻辑,功倍详尽的文档支持,现代化的演示效果按需引入,精简打包体积
    GitHub地址:https://github.com/YanxinNet/uView.git
    npm下载:npm install uview-ui
    
    

    WeUI WXSS

    WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验。
    GitHub地址:https://github.com/Tencent/weui-wxss
    npm下载:npm i weui-wxss
    

    iView WeApp

    iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本。
    GitHub地址:https://github.com/TalkingData/iview-weapp
    npm下载:npm i iview-weapp
    

    Vant Weapp

    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
    本仓库不再维护,请移步至 Vant Weapp 仓库.
    Vant Weapp 仓库地址: https://github.com/youzan/vant-weapp
    

    MinUI

    MinUI 是蘑菇街前端开发团队开发的基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库,适用场景广,覆盖小程序原生框架,各种小程序组件主流框架等,并且提供了专门的命令行工具。
    
    GitHub地址:https://github.com/meili/minui
    

    Wux WeApp

    Wux WeApp也是一个非常不错的微信小程序自定义 UI 组件库,组件比较丰富,值得使用。
    
    GitHub地址:https://github.com/wux-weapp/wux-weapp
    npm下载:npm i wux-weapp
    

    ColorUI

    ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
    
    其组件在美观性方面比较突出。
    
    GitHub地址:https://github.com/weilanwl/ColorUI
    
    展开全文
  • 微信小程序主流的图表工具 基于 Canvas,体积小 支持图表类型 饼图 pie 圆环图 ring 线图 line,scrollline 柱状图 column 区域图 area 雷达图 radar 直接上代码跟效果图,在这里我只选择环状图进行举例...

    wx-charts在微信小程序wepy框架下的使用

    wx-charts

    微信小程序主流的图表工具

    基于 Canvas,体积小
    支持图表类型

    饼图 pie
    圆环图 ring
    线图 line,scrollline
    柱状图 column
    区域图 area
    雷达图 radar
    

    直接上代码跟效果图,在这里我只选择环状图进行举例。。。

    在这里插入图片描述在这里插入图片描述

    // An highlighted block
    <style lang='css'>
    .canvas{
      height: 280px;
      width: 100%;
    }
    </style>
    <template>
      <view class="container">
        <canvas canvas-id="ringCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
        <!--<button type="primary" bindtap="updateData" style="margin-top:100rpx">更新title</button>-->
      </view>
    </template>
    <script>
      import wepy from 'wepy'
      var WxChartsring = require('../../utils/wxcharts-min.js')
      var ringChart = null
      export default class field extends wepy.page {
        config = {
          navigationBarTitleText: '环状图'
        }
        components = {
        }
        data = {
        }
        methods = {
        }
        events = {
        }
        onShow() {
        }
        touchHandler(e) {
          console.log(ringChart.getCurrentDataIndex(e))
        }
        updateData() {
          ringChart.updateData({
            title: {
              name: '80%'
            },
            subtitle: {
              color: '#ff0000'
            }
          })
        }
        onLoad() {
          var windowWidth = 320
          try {
            var res = wx.getSystemInfoSync()
            windowWidth = res.windowWidth
          } catch (e) {
            console.error('getSystemInfoSync failed!')
          }
          ringChart = new WxChartsring({
            animation: true,
            canvasId: 'ringCanvas',
            type: 'ring',
            extra: {
              ringWidth: 25,
              pie: {
                offsetAngle: -45
              }
            },
            title: {
              name: '周六',
              color: '#7cb5ec',
              fontSize: 25
            },
            subtitle: {
              name: '04.03',
              color: '#666666',
              fontSize: 15
            },
            series: [{
              name: '正常 15人',
              data: 78,
              stroke: false
            }, {
              name: '休假 35人',
              data: 35,
              stroke: false
            }, {
              name: '漏卡 15人',
              data: 15,
              stroke: false
            }, {
              name: '早退 63人',
              data: 63,
              stroke: false
            }, {
              name: '迟到 23人',
              data: 23,
              stroke: false
            }],
            disablePieStroke: false,
            width: windowWidth,
            height: 270,
            dataLabel: true,
            legend: true,
            background: '#f5f5f5',
            padding: 0
          })
          ringChart.addEventListener('renderComplete', () => {
            console.log('renderComplete')
          })
          setTimeout(() => {
            ringChart.stopAnimation()
          }, 500)
        }
      }
    </script>
    
    

    本人只是学习使用所以代码中数据没有做成动态,请忽略这点。
    每一个插件都不是完美的,wx-charts虽然体积小容易上手,但更复杂的图表无法满足,只能做一下简单的图表,关于更为复杂的图表本人推荐echarts,唯一缺点对于小程序来说体积有点大。

    来源于wx-charts github示例

    https://github.com/xiaolin3303/wx-charts
    https://github.com/xiaolin3303/wx-charts-demo

    展开全文
  • 基于go-gin的微信小程序api框架搭建

    千次阅读 2019-06-30 13:10:00
    基于go-gin的微信小程序api框架搭建 文章目录基于go-gin的微信小程序api框架搭建1.为什么选gin2. 其他技术3. 代码模块4. 我曾经跨过的山和大海4.1 如何优雅地使用gorm4.1.1 中文编码问题4.1.2 gorm居然不支持MYSQL的...

    基于go-gin的微信小程序api框架搭建


    废话不多说,先上 github链接

    1.为什么选gin

    • Gin是一个 go web 框架,最大的优点就是高性能,比 http router 快 40 倍。
    • 轻量,使用起来方便简洁,支持路由分组。
    • 对中间件支持很好,方便用第三方中间件也可以自己定义,还能很方便地跟路由进行结合。
    • 学习成本低。

    2. 其他技术

    Redis

    • 提供缓存支持,有利于提高数据交换速率。
    • gin-contrib的中间件sessions对redis的支持
    • 保存session,记录用户状态,方便鉴权。

    MySQL

    • 后端开发成员有一定的使用经验。
    • 也是主流的数据库之一。
    • go的ORM gorm对mysql的支持很不错,除了个别注意事项(4.1 如何优雅地使用gorm)。

    Nginx

    • 后台需要一定的安全保障,Nginx作为反向代理可以将服务端跟外界隔离开。
    • Nginx 可以为多个服务端进行代理,可以代理部署在多个端口 go server,从而使得服务器有着较高的抗压能力。
    • Nginx 较容易配置端口转发。
    • 网上教程很多,在此提供项目的配置文件供参考

    weApp SDK
    https://github.com/medivhzhan/weapp
    涵盖了wx小程序的各种请求,调用起来方便清晰
    “哟哟,这个轮子真是又大又圆”

    3. 代码模块

    先来看看文件树,再看看代码

    .
    ├── config 				# 用于读取配置文件config.json中的数据
    ├── config.json           
    ├── controllers         # 对路由请求进行处理
    │   ├── ad
    │   ├── resource
    │   ├── task
    │   └── user
    ├── database            # 链接数据库
    ├── main.go             # 主程序
    ├── middlewares         # 自定义的中间件
    │   ├── auth			# 用session进行鉴权
    │   ├── logger			# 自定义访问日志中间件,对日志进行格式修改、打印、分割
    │   └── session			# 注册gin-contrib/sessions 中间件
    ├── models              # 数据模型,对数据库进行访问
    │   ├── ad
    │   ├── campus
    │   ├── common
    │   ├── school
    │   ├── tag
    │   ├── task
    │   └── user
    ├── modules             # 自定义的模块
    │   ├── gredis			# 调用redis进行缓存
    │   ├── log				# 自定义日志,如错误日志
    │   └── util			# 工具包,对一些常用的代码块进行封装
    ├── router              # 路由
    └── storage             # 存储文件夹
        ├── file			# 文件存储
        ├── img				# 图片存储
        └── logs			# 日志存储
    

    4. 我曾经跨过的山和大海

    懒得写新的blog了,就放这了

    4.1 如何优雅地使用gorm

    附上文档,基本的CURD看完就可以上手了,简单易学,在此为大家排点雷。

    4.1.1 中文编码问题

    通过gorm建数据表时,设置编码,编码要是utf8mb4支持unicode,而不是utf8,

    DB.Set("gorm:table_options", "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4").CreateTable(&TableName{})
    

    4.1.2 gorm居然不支持MYSQL的JSON

    不管是go还是mysql,JSON的格式本质都是[]byte,既然如此,那就自己造一个JSON类型来用,参考内容

    4.1.3 关于外键

    gorm的外键关联是“软”关联,可以方便地用于创建、查询和修改,1对1、1对多、多对多都能很方便得完成,虽然我还是建了几个关系表。但是删除时却不会因为外键指向的数据项被删除而将该数据项删除

    4.2 鉴权

    新手上路,并没有使用高大上的JWT,而是用gin支持得很ok的sessions来进行。

    登录成功后将用户信息存入session

    session := sessions.Default(c)
    session.Set("userId", user.Id)
    err := session.Save()
    

    response里会有cookie,cookie的内容是session_id,发送请求时请务必带上

    鉴权中间件middlewares/auth.go

    //router.go中设置路由
    //context的传递:router->authMiddleware->controller
    userGroup.DELETE("/session", auth.AuthMiddleware(), userController.Logout)
    
    func AuthMiddleware() gin.HandlerFunc {
    	return func(c *gin.Context) {
    		session := sessions.Default(c)
    		userId := session.Get("userId")
    		if userId == nil {
    			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{
    				"msg": "invalid session token",
    			})
    			c.Error(errors.New("invalid session token"))
    		} else {
    			id := userId.(string)
    			users, _ := userModel.GetUsersByStrKey("id", id)
    			if len(users) == 0 {
    				c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{
    					"msg": "invalid session token",
    				})
    				c.Error(errors.New("invalid session token"))
    			} else {
    				c.Set("user", users[0])
    			}
    			c.Next()
    		}
    	}
    }
    

    4.3 优雅的api访问日志

    日志太丑了怎么办?用"github.com/sirupsen/logrus"来进行规范化
    日志太多了怎么办?用"github.com/lestrrat-go/file-rotatelogs"来切割一下
    代码还是比较通俗易懂的,中间件Logger
    如何服用?

    router := gin.Default()
    router.Use(logger.Logger())
    

    4.4 redis缓存

    推荐一个靠谱的教程

    5.结语

    关于go-web的部分,看到这,整体的api框架已经有了,但是还有其他很重要的东西

    1. 微信小程序要求支持https,如何配置服务器看这篇教程就差不多了。补充两个注意点:域名注册完要记得申请域名解析,并不是申请了ssl证书就可以了; 记得要去进行网站备案,不然会被工信部封。
    2. docker的部署还是一个大坑,留个教程位给gitgiter大佬。
    展开全文
  • 微信小程序几种主流开发框架

    千次阅读 2019-09-18 23:50:31
    腾讯官方开源的小程序组件化开发框架,目前有18w+Star ,一直在更新着,社区活跃,掉坑能快速的找到方法爬出来。 特性 类Vue开发风格 支持自定义组件开发 支持引入NPM包 支持Promise 支持ES2015+特性,如Asyn...
  • 【最近更新】mpvue入门系列教程:如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序...接触微信小程序有一段时间的开发者或开发团队,我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架...
  • 【最近更新】mpvue入门系列教程:如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序...接触微信小程序有一段时间的开发者或开发团队,我相信多多少少都会为自己搭建封装一些便于开发的框架/脚手架...
  • 微信小程序+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、开发文档参考(编辑中):...
  • 本文为微信小程序兼容、性能测试方法介绍。兼容操作系统兼容由于小程序依赖微信客户端本身,因此理论上来说只要微信客户端兼容的小程序应该都可以兼容,这里推荐覆盖Android和iOS主流版本系统即可,参考如下:...
  • 前言2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知。整个朋友圈瞬间便像炸开了锅似的,各种揣测、介绍性文章在一夜里诞生。而真正收到内测邀请的公众号据说...
  • 微信小程序

    2019-07-12 11:02:43
    微信小程序第一章 第一章
  • 众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本...
  • 微信小程序流行UI框架大全(.wxss)

    千次阅读 2019-10-19 18:42:54
    1、微信小程序UI组件库 iView Weapp https://weapp.iviewui.com/ 扫描下方小程序二维码,体验组件库示例: 介绍:iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是...
  • 支付宝小程序、百度小程序、微信小程序、今日头条小程序四大小程序对比分析,BAT小程序技术分析
  • 一个B/S结构下微信小程序的在线问卷调查系统,其后台可在主流浏览器上进行操作,前台采用微信小程序。它使用集成框架Spring+Sring MVC+MyBatis,存储数据库选用关系型数据库MySql,缓存数据库采用非关系型数据库...
  • 微信小程序学习笔记

    2021-03-26 11:51:29
    一、微信小程序pk网页 1、微信小程序是不是网页? 微信小程序使用的是wxml绘制页面结构,wxss绘制页面样式,js实现页面逻辑。好像和网页的html+css+js类似,其实他们之间还是有很多不同的: 网页的运行环境是浏览器...
  • 微信小程序——图片识别

    千次阅读 多人点赞 2020-01-03 13:55:11
    我的微信小程序 期末大作业——基于百度大脑API...目录1 概述1.1 课程大作业目的与要求1.2 课程大作业简介2 设计思路2.1 图片识别API2.2 微信小程序UI框架3 设计方案4 设计过程4.1 百度开放平台注册4.2 获取asscee_...
  • 微信小程序注册流程图文详解

    千次阅读 多人点赞 2019-06-13 11:48:13
    本文以图文形式详细记录微信小程序的注册流程及其注意事项
  • 谈谈微信小程序

    2020-06-24 19:13:15
    谈谈微信小程序 最近这段时间接触了微信小程序开发,也有一段时间没写博文了,也来写写简单的看法以及开发的部分问题与感想。 微信小程序,何方神圣? 有人可能会困惑微信小程序跟微信内嵌H5有什么区别? 其实如果你...
  • 很多公司都在做小程序,现在主流小程序有不少:微信小程序/头条小程序/百度小程序/支付宝小程序/QQ小程序...,很多公司为了方便开发都会采用taro或uni等开发方...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,409
精华内容 5,363
关键字:

微信小程序主流框架

微信小程序 订阅