第一步 制作靜態(tài)頁面之We-UI的使用

首先，制作靜態(tài)頁面，即沒有相關(guān)的跳轉(zhuǎn)和數(shù)據(jù)庫的讀取，單純是一個頁面，這個借助于微信開發(fā)者工具便可以實現(xiàn)
一些比較典型的組件，比如說搜索框，登錄按鈕借助于We-UI來實現(xiàn)（簡直是太好用了）
We-UI的使用方法：
（1）首先要下載以下它的包導(dǎo)入到項目中，下載到官網(wǎng)上下載
（2）然后將它的整個js文件用WebStorm打開
（3）打開演示網(wǎng)站這里是超鏈接https://weui.io/，或者直接用手機(jī)打開小程序的演示，找到需要演示的效果，再找到對應(yīng)的js文件，拷貝里面需要的內(nèi)容到小程序的wxml文件中，對里面的內(nèi)容做出調(diào)整
例如，主頁面的搜索框使用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>

總結(jié)

以上是生活随笔為你收集整理的静态页面设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。