weui學習總結——3、微信樣式介面切換

阿新 • • 發佈：2019-01-08

前言：weui是一個專門用於開發手機移動web或微信的樣式庫。但是官方只提供了demo沒有提供相關文件，所以這篇部落格就當是方便以後開發而使用吧。
weui資源下載（也可以從官網下載）：
http://download.csdn.net/download/zhengyikuangge/9940737

手機移動web開發必須要做的兩點：1、body中加上ontouchstart，即<body ontouchstart>...</body>；2、頁面上加入<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

微信樣式的介面切換

效果圖：
這裡寫圖片描述

全部程式碼如下：

<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>頁面切換</title>
<!-- 匯入所需資源，注意資源的路徑 --> 

<link rel="stylesheet" href="weui.css" />
<link rel="stylesheet" href="example.css"/>
<script src="zepto.min.js"></script>
<script src="example.js"></script>

<script type="text/javascript">
<!-- 這段js程式碼具體操作介面切換的功能 -->
    $(function(){
        var winH = $(window).height();
        var categorySpace = 10 
;

        $('.js_item').on('click', function(){
            var id = $(this).data('id');
            window.pageManager.go(id);
        });
        $('.js_category').on('click', function(){
            var $this = $(this),
                $inner = $this.next('.js_categoryInner'),
                $page = $this.parents('.page'),
                $parent = $(this).parent('li');
            var innerH = $inner.data('height');
            bear = $page;

            if(!innerH){
                $inner.css('height', 'auto');
                innerH = $inner.height();
                $inner.removeAttr('style');
                $inner.data('height', innerH);
            }

            if($parent.hasClass('js_show')){
                $parent.removeClass('js_show');
            }else{
                $parent.siblings().removeClass('js_show');

                $parent.addClass('js_show');
                if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                    var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                    if(scrollTop > this.offsetTop){
                        scrollTop = this.offsetTop - categorySpace;
                    }

                    $page.scrollTop(scrollTop);
                }
            }
        });
    });
</script>

<!-- js中建立div介面，也就是成功提示介面，注意js的id -->
<script type="text/html" id="tpl_msg_success">
<div class="page">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操作成功</h2>
            <p class="weui-msg__desc">內容詳情，可根據實際需要安排，如果換行則不超過規定長度，居中展現<a href="javascript:void(0);">文字連結</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推薦操作</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">輔助操作</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部連結文字</a>
                </p>
                <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>
</script>

<!-- js中建立div介面，也就是警告提示介面，注意js的id -->
<script type="text/html" id="tpl_msg_warn">
<div class="page">
    <div class="weui-msg">
        <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
        <div class="weui-msg__text-area">
            <h2 class="weui-msg__title">操作失敗</h2>
            <p class="weui-msg__desc">內容詳情，可根據實際需要安排，如果換行則不超過規定長度，居中展現<a href="javascript:void(0);">文字連結</a></p>
        </div>
        <div class="weui-msg__opr-area">
            <p class="weui-btn-area">
                <a href="javascript:history.back();" class="weui-btn weui-btn_primary">推薦操作</a>
                <a href="javascript:history.back();" class="weui-btn weui-btn_default">輔助操作</a>
            </p>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__links">
                    <a href="javascript:void(0);" class="weui-footer__link">底部連結文字</a>
                </p>
                <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>
            </div>
        </div>
    </div>
</div>
</script>


</head>
<body ontouchstart>
    <!-- 這段程式碼必須有，類似於介面切換的容器 -->
    <div class="container" id="container"></div>

<!-- js中建立div介面，也就是主介面，注意js的id -->
<script type="text/html" id="tpl_home">
    <div class="page">
    <div class="page__hd">
        <h1 class="page__title">Msg</h1>
        <p class="page__desc">提示頁</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <!-- 這裡要注意a的連結msg_success與成功提示介面的id相符 -->
        <a href="#msg_success" class="weui-btn weui-btn_default">成功提示頁</a>
        <!-- 這裡要注意a的連結msg_warn與警告提示介面的id相符 -->
        <a href="#msg_warn" class="weui-btn weui-btn_default">失敗提示頁</a>
    </div>
    </div>

</script>  

</body>
</html>

當我看到這段程式碼的時候特別糾結，也是第一次看到這樣寫的程式碼

關於weui暫時只寫這三篇部落格，因為目前其他的還沒有用到，有興趣的同仁可以留言討論~

weui學習總結——3、微信樣式介面切換

前言：weui是一個專門用於開發手機移動web或微信的樣式庫。但是官方只提供了demo沒有提供相關文件，所以這篇部落格就當是方便以後開發而使用吧。 weui資源下載（也可以從官網下載）： http://download.csdn.net/download/z

weui學習總結——1、weui表單常用標籤

前言：weui是一個專門用於開發手機移動web或微信的樣式庫。但是官方只提供了demo沒有提供相關文件，所以這篇部落格就當是方便以後開發而使用吧。 weui資源下載（也可以從官網下載）： http:

【總結整理】微信產品-張小龍-PM學習總結

的人重要二維碼皮膚品牌問題出發是否優化偉大的產品可以滿足人類的情感需求。找到需求背後的心理訴求產品的終極目標是滿足任性需求，不在產品中摻雜自己的道德感。“我有個好主意”，往往都是脫離用戶需求的。 1，不直接滿足用戶需求2，用戶需求是零散的，解決方案是歸納抽

1、微信小程式學習：基本控制元件的使用

最近公司app客戶端沒有新的需求了，接下來的工作任務是學習微信小程式的開發，先從最基本的控制元件開始學習。一、檢視容器 1、view的使用 wxml檔案中的程式碼： //建立一個view，class='style'是引用wxss檔案中的樣式

微信公眾號開發C#系列-12、微信前端開發利器：WeUI

1、前言通過前面系列文章的學習與講解，相信大家已經對微信的開發有了一個全新的認識。後端基本能夠基於盛派的第三方sdk搞定大部分事宜，剩下的就是前端了。關於手機端的瀏覽器的相容性問題相信一直是開發者們的一塊心病，對於微信開發前端元件這一塊總是找不到合適的移動端元件，什麼都要自己去實現，這個開發成本就大了去了。

ES6標準學習： 3、數值的擴展

平方和全局 oat 數值限制相關模式安全不同數值的擴展註：以下內容中: 0 表示數字零， o 為英文字母。一、二進制和八進制數值表示法 es6提供了二進制和八進制的數值表示法,分別用前綴0b(或者0B)和0o(或者0O)表示。 1 0b

QQ、手機號、微信、身份證、郵箱正則驗證

blog pre 前綴 highlight var logs clas brush test QQ正則驗證查了下，現在QQ的長度最長是10位數，驗證格式為不以0開頭的5-10位數字就可以了 var reg = /^[1-9]\d{4,9}$/; reg.test(‘01

js學習總結----設置元素的樣式值setcss

默認 div function ret ttr lte fun wid ott 在JS給元素設置樣式屬性值，我們只能通過curEle.style[attr] = value 這種方式給元素設置行內樣式下面封裝一個給當前元素的某一個樣式屬性設置值的方法（增加在行內樣式上的）

在Android中使App高速、簡單地支持新浪微博、微信、QQ、facebook等十幾個主流社交平臺的分享功能

分析 ont renren androidm mod 執行 xen 12px 操作前言在如今的APP或者遊戲中，分享功能差點兒已經成為標配。分享功能不但能夠滿足用戶的需求。也能夠為產品帶來很多其它的用戶，甚至能夠對用戶的行為、活躍度、年齡段等情況進行數據統計，使得軟

CSDN博客QQ加群、微信

i++ -a script font pop cti num 影響 tar 對於QQ加群我一直是拒絕的，不是自己擺姿態，而是實在沒有這種影響力和能力。然而今日一朋友的話改變了我這種想法，所以嘗試在CSDN博客首頁上增加QQ加群功能。此博客也就權當一個記錄

微信編輯器哪個好？2017年最實用3種微信編輯器匯總

微信編輯器微信圖文編輯器微信文章編輯器現在新媒體的營銷非常火，每天看微信都是各種爆文及10萬+的文章分享，這些文章究竟是怎樣孕育而生的呢？一個新媒體運營人該如何去打造屬於自己的爆文呢？小編目測，一款好用的微信編輯器可以幫助你寫出高質量的文章，今天小編介紹3款實用的微信編輯器，微知微信編輯器、

項目總結1（微信+vue2.0）

列表 bin -h ons 獲取 value 沒有 object 方法項目總結（vue2.0）一、基礎知識 1.生命周期（項目到用到的） Created：組件實例化創建完成，屬性綁定DOM未完成。($el 屬性還不存在)。 Mounted：組件掛在完成，虛擬DOM渲染到

實現QQ、微信、新浪微博和百度第三方登錄(Android Studio)

wiki protocol super cli 路徑參考 syn jar包 all 前言：對於大多數的APP都有第三方登錄這個功能，自己也做過幾次，最近又有一個新項目用到了第三方登錄，所以特意總結了一下關於第三方登錄的實現，並拿出來與大家一同分享；各大開放平臺註冊

Java企業微信開發_07_總結一下企業微信的配置

alt 微信 idt cnblogs 信息 java 域名 ram com 一.企業微信後臺 1.回調url 2.可信域名 3.菜單跳轉按鈕中的鏈接 4.PC端網頁授權二、代碼內 1.企業微信的配置信息：WeiXinParamesUtil

C#開發微信門戶及應用(47) - 整合Web API、微信後臺管理及前端微信小程序的應用方案

post 裏的 www. 一個數據庫展開動態建立 http 文本在微信開發中，我一直強調需要建立一個比較統一的Web API接口體系，以便實現數據的集中化，這樣我們在常規的Web業務系統，Winform業務系統、微信應用、微信小程序、APP等方面，都可以直接調用基於

python 學習總結3

今天 pre 小程序 brush mas 返回等待 add 學習總結今天學習了socket的一些知識，主要為socket模塊中socket()類及其父類的一些方法只要包括: sock=socket.socket() sk.bind(address) #

分析一下H5直播、微信直播、抓娃娃、低延時的方案

毫秒 nginx 支持 rtmp 前端延遲時長左右 html 微信直播,HTML5直播,主要方案有如下幾種： 1,基於hls切片直播，前前是應用的主流,服務器可以選fms,wowza,nginx,srs之類優點：集成方便，支持度高，兼容性好，主流手都支持，是目前直播

一、微信小程序拼團項目簡介

人員及其程序組件 dev cat 後臺名稱使用實現目標：類似於拼多多商城的開團，參團，以及單人購買的電商項目實現技術：　　1. 前端采用微信小程序的組件，參考官方API：https://mp.weixin.qq.com/debug/wxadoc/dev/co

2018-1-6-個人博客、博客園、微信公眾號、Github、本地同步寫博客

公眾 form isp ima 語法頁面 mas .html 直接 2018-1-6-個人博客、博客園、微信公眾號、Github、本地同步寫博客Markdown教程同步全篇教程是利用Markdown神器--小書匠進行串聯地，墻裂推薦大家使用 1.寫博客2.發布到博

官方揭秘！同時兼容iOS、Android、微信小程序的UI引擎

控制 com gpo 配置 rect 定義 init .so pos 在應用開發過程中，一些效果使用純前端h5實現體驗比較差，為此開發者會選擇相應的原生UI模塊來替代，原生模塊性能和體驗好，但目前存在的一個問題就是界面可定制性比較差，不能百分百滿足需求。為此，結合原生模塊的

weui學習總結——3、微信樣式介面切換

微信樣式的介面切換

相關推薦