WeUI

一、使用weui 　　学习一个新的技术，想要最短时间掌握并熟练使用它，那就是直接做项目了。把技术直接应用到项目中来，直接做出东西，这是我的方法，因为我很懒不太喜欢看一步一步看文档，看理论。 　　那怎么使用weui，应用到项目中来呢？ 　　1、因为小程序不使用npm，所以直接去github把weui下载下来： 　　　　　　 https://github.com/Tencent/weui-wxss/ 　　2、用微信开发者工具打开刚下载下来的weui项目：weui-wxss-master，看看这里面都有些什么，要用到什么就直接取他的页面代码 　 =============================================================== 　　二、开一个微信小程序新项目，把weui库应用进去，怎么应用的呢？看下面步骤 　　　　2.1、新建一个微信小程序项目：weui-demo 　　2.2、在weui-wxss-master里找到weui.wxss文件放到自己新项目的根目录下，如： 　　　　　　　　网上是这么说的，我也这么放了，但是报错，如下：在此说一句：fuck , 我去尼玛的什么鬼 　　。。。不好意思找错weui.wxss文件了，应该是dist目录下的style目录下的weui.wxss文件 　　正确的文件应该是：weui-wxss-master

微信小程序中的组件 前言 之前做小程序开发的时候，对于开发来说比较头疼的莫过于自定义组件了，当时官方对这方面的文档也只是寥寥几句，一笔带过而已，所以写起来真的是非常非常痛苦！！ 好在微信小程序的库从 1.6.3 开始，官方对于自定义组件这一块有了比较大的变动，首先比较明显的感觉就是文档比以前全多了，有木有！（ 小程序文档 ），现在小程序支持简洁的组件化编程，可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中复用，提高自己代码的可读性，降低自己维护代码的成本！ 本篇文章就是手把手教你实现小程序中自定义组件，坐稳啦~ 具体实现 要做自定义组件，我们先定一个小目标，比如说我们在小程序中实现一下 WEUI 中的弹窗组件，基本效果图如下。 WEUI弹框 Step1 我们初始化一个小程序（本示例基础版本库为 1.7 ），删掉里面的示例代码，并新建一个 components 文件夹，用于存放我们以后开发中的所用组件，今天我们的目的是实现一个 弹框 组件，因此，我们在 components 组件中新建一个 Dialog 文件夹来存放我们的弹窗组件，在 Dialog 下右击新建 Component 并命名为 dialog 后，会生成对应的 json wxml wxss js 4个文件，也就是一个自定义组件的组成部分，此时你的项目结构应该如下图所示： 项目结构 Step2

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。 基于微信小程序轻快的特点，小程序拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。 一、小程序概述 一个小程序页面组成，如下： 为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。 1.1、小程序的工作原理 首先，我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。 小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。 1.2、小程序的本质 所以，小程序的编码方式实际上是使用前端的语言进行编写的。从理解的角度

一 业务背景介绍 小女子毕业于湖南长沙某985二梯队大学，在深圳某厂工作，鉴于本校在深圳校友众多（大概4w+）, 急切需要一个校友交流的平台，传统的网站形式以及没落且无人问津，故打算开发 一个小程序+公众号的社交平台，供木讷的工科师兄师弟师姐师妹交流，初步计划的模块有资讯，交友，互助，捐赠，个人中心，代言母校，聚会活动，校友供需，后续会陆续来落实。 二 前端技术方案选型 原生 ：对性能特别苛刻 or 追求稳定 or 要用最新功能，请记住任何时刻原生都是最稳定性能最好的选择！！！！ KBone ：kbone 是一个致力于微信小程序和 Web 端同构的解决方案，微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。 MPVue ：是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 WePY ：腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征

1.公众号样式UI库的下载地址： https://github.com/Tencent/weui 2.微信小程序UI库的下载地址： https://github.com/Tencent/weui-wxss/ 3.微信小程序的官方实例Demo: https://github.com/wechat-miniprogram/miniprogram-demo 4.下载小程序官方示例：（同第3项效果一样）。从官方文档也可以找到下载示例入口。 打开 https://developers.weixin.qq.com/miniprogram/dev/demo.html 找到小程序开发——>简易教程——>体验小程序——>查看小程序实例源码，下载之后，在开发者工具打开，即可。（如下图） 来源： oschina 链接： https://my.oschina.net/u/4417072/blog/3646550

疫情以来，学校或者公司、什么机构，都会每天统计班上同学或者公司员工的健康状况，每天收集大家的活动地点、健康码或者健康宝截图之类的信息。很多机构还在使用excle的表格统计，非常麻烦，现在用微信小程序实现一个非常方便的系统，用于统计健康状况。后台可以直接导出表格信息。 程序大概是这个样子： 后台支持导出信息： 支持查看每个人的健康二维码等 虽然这个demo非常简单，但是却把基本的操作都走了一遍，读者可了解学习的我总结了一下就是： 1、如何使用云开发quickstart 2、如何引入小程序的外部组件库，实现更好看的样式。 3、如何操作小程序云数据库来进行数据存储、查询、crud那些。 4、如何使用小程序的云存储（这里以上传一张图片、健康码为例） 准备工作 可以先参考我之前发布的手机号归属地查询小程序 1、 申请账号 个人开发的话，虽然一个人名下可以有五个小程序，但一个邮箱只能对应管理一个小程序。如果你想开发多个，还得多用几个邮箱，非常麻烦。 按流程注册完成之后，会有一个 AppID(小程序ID) ，这个ID很重要。在IDE创建项目和项目上线都是需要的。 2、 安装开发者工具IDE 我这里用的是稳定版 Stable Build。微信的IDE界面还行，但是拓展功能很差，快捷键支持的也不多，不是特别好用 。我大致给画一下区域 3、 基本认识 这里我们首先要认识四种文件类型 json、、js

昨天有个同事问我有没有可以直接上手的前端UI框架。 那今天就给大家推荐6个简单、视觉体验好的前端框架 没吃过猪肉，肯定见过猪跑！ Jquery Mobile demo地址： https://demos.jquerymobile.com/1.1.0/ 教程地址: https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html 这个应该是最简单的，能够快速上手了！ jQuery Mobile 还发布一个完整统一的jQuery移动 UI组件。支持全球主流的移动平台。 部件是功能丰富，有状态的插件。随着方法和事件，有一个完整的生命周期。 如果想5分钟就能直接上手的，Jquery Mobile首当其冲！ ColorUI github地址： https://github.com/weilanwl/ColorUI 官网地址： https://www.color-ui.com/ 鲜亮的高饱和色彩，专注视觉的小程序组件库 ColorUI 是小程序组件库，但不是纯样式库。由于WeUI有些淡雅，可能不合某些时尚公司的风格，因此 ColorUI 也有庞大的追捧者。 github上标星高达8.8k 相信你肯定有用过使用ColorUI的小程序 如果要开发小程序，这款开源框架是一个不错的选择。 Material material

昨天有个同事问我有没有可以直接上手的前端UI框架。 那今天就给大家推荐6个简单、视觉体验好的前端框架 没吃过猪肉，肯定见过猪跑！ Jquery Mobile demo地址： https://demos.jquerymobile.com/1.1.0/ 教程地址: https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html 这个应该是最简单的，能够快速上手了！ jQuery Mobile 还发布一个完整统一的jQuery移动 UI组件。支持全球主流的移动平台。 部件是功能丰富，有状态的插件。随着方法和事件，有一个完整的生命周期。 如果想5分钟就能直接上手的，Jquery Mobile首当其冲！ ColorUI github地址： https://github.com/weilanwl/ColorUI 官网地址： https://www.color-ui.com/ 鲜亮的高饱和色彩，专注视觉的小程序组件库 ColorUI 是小程序组件库，但不是纯样式库。由于WeUI有些淡雅，可能不合某些时尚公司的风格，因此 ColorUI 也有庞大的追捧者。 github上标星高达8.8k 相信你肯定有用过使用ColorUI的小程序 如果要开发小程序，这款开源框架是一个不错的选择。 Material material

经常看到很多好的前端框架，今天起凡是遇到就整理到这里，此文会不断更新。 1，avalon 组件--作者司徒正美，国产MVVM JS组件 https://segmentfault.com/u/situzhengmei/articles 文章列表 2，Vue.js-- Mobile web UI Components based on Vue and WeUI. Be Cool with Vue & WeUI. https://github.com/airyland/vux 3,微信平台开源SDK包 Senparc.Weixin SDK http://weixin.senparc.com/ 4， 我为NET狂官方群福利贴：一些常用的工具（上） 有很多前端工具链接 5，图表工具， http://echarts.baidu.com/examples.html Echarts不错， 不过跟Highcharts 比较，Echarts 就像是 Office 和 WPS 的关系， 具体比较看这里 6，比较好的介绍火热的VUE框架的文章： 基于Webpack、Vue、Vue-Router 的 SPA 初体验 7,Vue中文文档资源： http://vuefe.cn/ 8,Ant Desgin https://ant.design/components/form/ PC端 https://mobile

1.最常见的框架官方框架MINA 地址： https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 官方介绍：框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。 2.WeUI 小程序 地址： https://weui.io/ 官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。小程序开发中最常用到的一款框架，受广大开发人员的欢迎。 3.美团小程序框架mpvue 地址： http://mpvue.com/ 官方介绍：mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心，mpvue修改了 Vue.js的 runtime和 compiler实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套Vue.js开发体验。 4.组件化开发框架wepy 地址： https://wepyjs.github.io/wepy-docs/ 官方介绍：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题,支持使用第三方 npm 资源，自动处理 npm