微信小程序——weui的使用
使用
在根目录中复制weui.wxss,app.wxss中引入
在weui.io中查看到自己想要的样式表后,到第二个网站复制代码,复制到自己的项目中即可
<!--pages/register/register2.wxml-->
<view class="container">
<view class="page__hd">
<view class="page__title">学生用户注册</view>
<view class='linkTo' bindtap='toMangerReg'> 我是经营者,上线我的店铺-></view>
</view>
<form>
<view class='list-title'>注册手机</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd" style="width: 80px">
<picker bindchange="bindCountryCodeChange" value="{{countryCodeIndex}}" range="{{countryCodes}}">
<view class="weui-select">{{countryCodes[countryCodeIndex]}}</view>
</picker>
</view>
<view class="weui-cell__bd weui-cell__bd_in-select-before">
<input class="weui-input" placeholder="请输入手机号码" bindinput='mobileChange'/>
</view>
</view>
</view>
<view class='list-title'>实名制</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd" style="">
<picker bindchange="bindSchoolChange" value="{{schoolIndex}}" range="{{schools}}">
<view class="weui-select">学校</view>
</picker>
</view>
<view class="weui-cell__bd weui-cell__bd_in-select-before">
<input class="weui-input"value="{{schools[schoolIndex]}}" bindinput='shcoolChange'/>
</view>
</view>
</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label" style='width:65px;'>学号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="请输入你的学号" bindinput='studentIDChange'/>
</view>
</view>
</view>
<view class='list-title' style='margin-bottom:20px;'>上传相关学生证照片(能证明个人人身份)</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box" style=''>
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
<button class="weui-btn" type="default" bindtap='toVerify'>开始验证</button>
</form>
</view>
---------------------
微信小程序——weui的使用的更多相关文章
- 微信小程序weui的使用
大家好,我是前端菜鸟,大家可以叫我惊蛰,今天给大家分享一下在微信小程序中对weui的引入和使用,其他的也不再赘述,文中有不对的还请指正,谢谢. 直入主题: 1.下载weui 进入GitHub http ...
- 微信小程序 weui 使用方法
https://github.com/Tencent/weui-wxss/ 下载地址用于小程序的https://github.com/Tencent/weui 下载地址用于H5 运用示例 ...
- 微信小程序-weui实例代码提取
搜索框 对应代码如下: wxss文件 <view class="page"> <view class="page__hd"> <v ...
- 微信小程序从零开始开发步骤-引入框架WeUI
首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...
- 微信小程序从零开始开发步骤(八)引入框架WeUI
首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端 ...
- 使用weui开发微信小程序
一.使用weui 学习一个新的技术,想要最短时间掌握并熟练使用它,那就是直接做项目了.把技术直接应用到项目中来,直接做出东西,这是我的方法,因为我很懒不太喜欢看一步一步看文档,看理论. 那怎么使用we ...
- 微信小程序:app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui
微信小程序 PK APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project. ...
- 微信小程序开发(二)——使用WeUI组件库
一.前言 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库.有的,它就是 ...
- 微信小程序使用weui扩展组件踩坑
最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入 ...
随机推荐
- 频繁模式挖掘 Apriori算法 FP-tree
啤酒 尿布 组合营销 X=>Y,其中x属于项集I,Y属于项集I,且X.Y的交集等于空集. 2类算法 Apriori算法 不断地构造候选集.筛选候选集来挖掘出频繁项集,需要多次扫描原始数据.磁盘I ...
- linux C函数之strdup函数分析【转】
本文转载自:http://blog.csdn.net/tigerjibo/article/details/12784823 linux C函数之strdup函数分析 一.函数分析 1.函数原型: #i ...
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
1.前期准备 具体可见VS2010 使用TeeChart绘图控件 - 之一 控件和类的导入 1. 1 添加TeeChart控件,给控件添加变量m_TeeChart 添加TeeChart控件,右击控件, ...
- [JSOI 2010] 满汉全席
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1823 [算法] 2-SAT [代码] #include<bits/stdc++ ...
- Python猜年龄
题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...
- javascript的鼠标事件---基础
- Akka源码分析-Persistence
在学习akka过程中,我们了解了它的监督机制,会发现actor非常可靠,可以自动的恢复.但akka框架只会简单的创建新的actor,然后调用对应的生命周期函数,如果actor有状态需要回复,我们需要h ...
- CF 436D 最小生成树
设一个开头的虚节点,然后建稠密图,O(n^2).使用prim.O(n^2),保存方案,没什么好说的. #include <string.h> #include <stdio.h> ...
- python网络爬虫之图片链家在技术.seleninum和PhantonJS
一.什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- impo ...
- B-Tree 漫谈 (从二叉树到二叉搜索树到平衡树到红黑树到B树到B+树到B*树)
关于B树的学习还是需要做点笔记. B树是为磁盘或者其他直接存取辅助存储设备而设计的一种平衡查找树.B树与红黑树的不同在于,B树可以有很多子女,从几个到几千个.比如一个分支因子为1001,高度为2的B树 ...