WeUI

小程序-基础表达篇

眉间皱痕 提交于 2019-11-30 23:48:41
/约定/ 让我们轻装上阵 一个功能页(Page)的开发通常需要四大块:配置、代码、布局、样式。 这四大块承载不同的方面,要独立不混杂,又要整体融合。于是有了以下约定: 每一块 --> 独立的文件、相同的文件名、不同的扩展名。 按约定行事,自动融合。 于是,一个小程序的功能页 Page,就这样形成了。 index.json index.js index.wxml index.wxss 而 app.js,app.json,app.wxss 则作为全局定义。 再继续来看代码部分 它少不了这三大块:数据、生命周期、功能过程。 不需要额外的配置,约定一种结构方式即可。 Page({ data, on阶段, func... }) 再来看四大块中的交互 通过约定之后,可谓我中有你,你中有我,wxss 定义的名称,wxml 可以根据需要使用,js 定义的数据,wxml 可以灵活呈现,数据变,呈现自动变。 常用表达 1.点击事件 通过 bindtap 属性指定一个功能函数名称即可。以下示例中, {{ msg }} 绑定代码中定义的数据属性 msg,按钮点击事件,执行代码中的 clickMe 功能函数,它改变了 msg 的值,则页面也会相应的呈现新的值。 <view>{{ msg }}</view> <button bindtap="clickMe">点击我</button> Page({ data:

uni app 零基础小白到项目实战-1

旧城冷巷雨未停 提交于 2019-11-30 15:29:41
uni-app是一个使用vue.js开发跨平台应用的前端框架。 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验。 Uni-app继承自vue.js,提供了完整的vue.js开发体验。 uni-app组件规范和扩展api与微信小程序基本相同。 有一定vue.js和微信小程序开发经验的开发者可快速上手uni-app,开发出兼容多端的应用。 uni-app提供了条件编译优化 pages.json: 配置页面路由,导航条,选项卡等页面类信息。 manifest.json: 配置应用名称,appid,Logo,版本 app.vue 应用配置,用来配置app全局样式以及监听应用的生命周期。 main.js: vue初始化入口文件 static目录:存放应用引用静态资源 pages目录:业务页面文件存放目录 components目录:组件文件存放目录 uni-app页面样式与布局 重要说明 请删除app.vue中的全局样式,view{display:flex;} 在需要flex的时候使用flex即可。 尺寸单位 uni-app框架目前仅支持长度单位px和%,与传统web页面不同,px是相对于基准宽度的单位,已经适配了移动端屏幕,其原理类似于rem。 uni-app的基准宽度为750px

微信小程序weui的使用

≡放荡痞女 提交于 2019-11-30 02:19:34
大家好,我是前端菜鸟,大家可以叫我惊蛰,今天给大家分享一下在微信小程序中对weui的引入和使用,其他的也不再赘述,文中有不对的还请指正,谢谢。 直入主题: 1.下载weui   进入GitHub https://github.com/weui/weui-wxss/ 进入如下页面,点击红色框选下载程序代码   解压后进入文件夹,图示路径下的weui.wxss就是我们所需要的weui库 2.引入weui    打开微信开发者工具创建项目(这个就不在介绍了),目录如下   创建好项目,接下来要做的就是将刚才下载解压的weui文件夹里的weui.wxss,直接复制粘贴放在项目根目录下即可   到此引入步骤还没结束,要在项目中使用,还需要在全局app.wxss中加入@import "weui.wxss",至此完成引入 3.使用weui   从GitHub上下载的weui文件夹里除了我们要使用的weui. wxss文件,还有一个很重要的文件夹,那就是example文件   直接将该文件扔进vscode里,我们就可以看到各个组件的代码。微信小程序weui网站 https://weui.io/ 上有小程序weui的样式展示,当然我们也可以直接进weui的小程序手机上查看weui的样式,然后根据需求来选择组件的使用,但是这里都没有介绍weui具体的使用,但是example文件夹里有。  

移动端日期选择,下拉框选择效果

被刻印的时光 ゝ 提交于 2019-11-29 18:48:46
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WeUI</title> <!--必须--> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <!--引入css样式文件--> <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.css"/> </head> <body> <div class="page"> <div class="page__hd"> <h1 class="page__title">Picker</h1> <p class="page__desc">多列选择器,需要配合js实现</p> </div> <div class="page__bd page__bd_spacing"> <a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a> <a href="javascript:;" class="weui-btn weui-btn

vux-scroller实现移动端上拉加载功能

谁说我不能喝 提交于 2019-11-28 23:51:43
  本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能:     纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库;          vux(官方文档: https://doc.vux.li/zh-CN/ )是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUi的基础上定制需要的样式。vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。vux并不完全依赖于WeUi,vux在WeUi的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUi的设计规范。     首先我们需要安装vux的依赖包,命令如下:       npm install vux --save       官方文档声明了vux必须配合vux-loader一起使用,所以我们需要在build/webpack.base.conf.js里参照如下代码进行配置: const vuxLoader = require('vux-loader') const webpackConfig = originalConfig /

vux-scroller实现移动端上拉加载功能

╄→尐↘猪︶ㄣ 提交于 2019-11-28 22:24:28
   本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能:     纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库;          vux(官方文档: https://doc.vux.li/zh-CN/ )是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUi的基础上定制需要的样式。vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。vux并不完全依赖于WeUi,vux在WeUi的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUi的设计规范。     首先我们需要安装vux的依赖包,命令如下:       npm install vux --save        官方文档声明了vux必须配合vux-loader一起使用,所以我们需要在build/webpack.base.conf.js里参照如下代码进行配置: const vuxLoader = require('vux-loader') const webpackConfig = originalConfig

小程序多图片上传组件封装及使用

爷,独闯天下 提交于 2019-11-28 06:29:41
  最近刚开发了小程序上传图片功能,为了便于后续查找,特此记录归总。   在实际开发过程中,图片上传功能是很常用的功能,所以将其封装成组件,避免后续重复劳动力,已是不争的事实。   一、先将图片上传功能能封装成公用模块(common.js)中,便于其它其它功能调用。此处封装了单张图片上传和多张图片上传。   common.js 文件 /** * 文件上传 */ function uploader(file, callback) { wx.uploadFile({ url: "http://10.109.86.1:5300/education/api/education/ImageUploader", //服务端Url filePath: file, //需要上传的文件 name: 'anqindayviews', //文件名称 header: { "Content-Type": "multipart/form-data" }, success: function(res) { if (res && res.data) { var data = JSON.parse(res.data); if (data.isSuccess && callback) { callback(data.content); } else { wx.hideToast(); wx.showModal({

mui的上拉加载下拉刷新的实现

折月煮酒 提交于 2019-11-28 03:50:25
---- 效果图 ---- 用的是mui框架。(我自己不会,朋友教我的。这篇可能不是很好,希望能对你有所帮助。) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <link rel="stylesheet" type="text/css" href="WEIXIN/css/mui.css"/> <link rel="stylesheet" type="text/css" href="WEIXIN/css/weui.min.css"/> <title>我的报修工单</title> </head> <body> <script src="ByFrame/js/jquery.min.js?v=2.1.4"></script> <!-- ############ 分割线 ############# --> <!--BEGIN toast--> <div id="toast" style="display: none;"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i

weui的使用

此生再无相见时 提交于 2019-11-28 01:01:51
weui的demo地址: https://weui.io github地址: https://github.com/Tencent/weui.js 开发 安装 git clone https://github.com/Tencent/weui.js.git cd weui.js npm install npm start 编译 npm run build 使用 global <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css"> <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script> <script type="text/javascript"> weui.alert('alert'); </script> import as module import 'weui'; import weui from 'weui.js'; weui.alert('alert');具体文档建地址详情: https://github.com/Tencent/weui.js/blob/master/docs/README.md /*--

jQuery WeUI 组件下拉刷新和滚动加载的实现

你离开我真会死。 提交于 2019-11-27 12:52:42
一、引入文件 <link rel="stylesheet" href="Content/jqueryweui/weui.min.css"> <link rel="stylesheet" href="Content/jqueryweui/jquery-weui.min.css"> <script type="text/javascript" src="Content/jqueryweui/jquery.min.js" ></script> <script type="text/javascript" src="Content/jqueryweui/jquery-weui.min.js"></script> <div class="content" style="background-color: #FFFFFF; width: 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;"> <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%;