静态页面设计

第一步 制作静态页面之We-UI的使用

首先,制作静态页面,即没有相关的跳转和数据库的读取,单纯是一个页面,这个借助于微信开发者工具便可以实现
一些比较典型的组件,比如说搜索框,登录按钮借助于We-UI来实现(简直是太好用了)
We-UI的使用方法:
(1)首先要下载以下它的包导入到项目中,下载到官网上下载
(2)然后将它的整个js文件用WebStorm打开
(3)打开演示网站这里是超链接https://weui.io/,或者直接用手机打开小程序的演示,找到需要演示的效果,再找到对应的js文件,拷贝里面需要的内容到小程序的wxml文件中,对里面的内容做出调整
例如,主页面的搜索框使用We-UI的代码:

<view class="weui-search-bar {{inputShowed ? 'weui-search-bar_focusing' : ''}}" id="searchBar">
			<form class="weui-search-bar__form">
				<view class="weui-search-bar__box">
					<i class="weui-icon-search"></i>
                    <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                    <span class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"></span>
				</view>
				<label class="weui-search-bar__label" bindtap="showInput">
					<i class="weui-icon-search"></i>
                    <span class="weui-search-bar__text">搜索</span>
				</label>
			</form>
            <view class="weui-search-bar__cancel-btn" bindtap="hideInput">取消</view>
		</view>
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读