在打開微碼基礎模板且安裝完依賴后，資源管理器的 “WECODE TOOLS”會出現菜單，點擊“本地調試”，將會開始編譯運行項目，最后將在默認瀏覽器打開首頁 ( src/html/index.html )。
到這里，項目已經跑起來了，可以開始加入我們想要的功能了。
我們來看一下index.html：
123456789101112131415161718192021222324????
????????保存后在瀏覽器看到效果如下：
接下來設計一個列表，這里還是使用官方UI組件中的樣式，如果你需要個性化列表樣式，請自行設計，打開（https://open.welink.huaweicloud.com/wecode/docs/dev/ui_cloud/navbar/navbar.html?v=1547690385）?引入UI組件的列表dom結構，因為有三個分類，所以列表也需要有三個容器包裹，這樣等下好做導航切換效果：
1234567891011121314151617181920212223242526272829
這里需要用樣式控制顯示和隱藏：
12.news-list?.weui-cells{?display:?none;?}.news-list?.weui-cells.active{?display:?block;?}
保存看效果：
好啦，一個新聞列表的dom結構大致完成了，當然這里的數據是寫死的，具體開發中需要使用后端接口提供的數據，關于如何使用網絡請求，請參考官方api：在微碼中發送網絡請求（https://open.welink.huaweicloud.com/wecode/docs/dev/jsapi/fetch/fetchinternet_cloud.html?v=1547690385）
接下來實現導航欄的切換效果，在src/html中新建一個js文件，就命名為main.js吧，然后在index.js中引入：
打開main.js，我們用jquery的選擇器來操作：
12345$('.weui-navbar?.weui-navbar__item').on('click',?function?()?{??var?index?=?$(this).index();??$(this).addClass('weui-bar__item_on').siblings().removeClass('weui-bar__item_on');??$(`.news-list?.weui-cells:eq(${index})`).addClass('active').siblings().removeClass('active');});
保存就可以看到導航欄可以切換了，且下面的列表也會跟隨切換。
好了，接下來需要設計一個詳情頁。詳情頁就是一篇文章，實際開發中，整個文章dom結構都是從接口得到的，這里使用靜態內容做一個示范。
將src下的desc目錄更名為news，作為詳情頁，且需要在app.json中同步更改：
src/app.json：
123456{??"pages":?[????"html/index",????"news/index"??]}
src/news/index.html：
12345678910111213141516171819202122 當飛機在機場上空盤旋，等待降落到跑道上時，你可趁機望望窗外的風景。在你面前，有如明信片上的照片一樣美麗的就是亞拉拉特山。它是世界上最著名的山之一，毋庸置疑也是宗教地位最高的山之一。雖然三大亞伯拉罕宗教（猶太教、基督教與伊斯蘭教）的教徒在許多事情上存在分歧，但他們都相信《舊約·創世紀》中的描述，即當上帝讓世界發洪水的時候，諾亞方舟最后停泊的地方就在亞拉拉特山。 雖然有許多人不相信諾亞方舟的故事，但在高加索的這一部分地區，確有一些地理證據表明這里曾發過大洪水。如果真的是這樣，雖然洪水無疑為當地的民眾帶來了災難（并在此之后，被他們的民間傳說收錄進來，口耳相傳）,但洪水影響的也可能僅僅是一小部分地區。一些地理學家與考古學家曾暗示洪水可能是海嘯造成的，而在古代人看來，那就是上帝在發怒。亞拉拉特山現在已經不屬于亞美尼亞了，它是國境線另一側的土耳其的領土，對這一點亞美尼亞人格外敏感，但是這座山依舊是亞美尼亞人的民族認同的一個重要的部分。亞美尼亞民族自稱是諾亞最小的兒子雅弗的后代；亞拉拉特山出現在國徽與銀行發行的紙幣上；在亞美尼亞的古代傳說中，亞拉拉特山是眾神之家，這點非常像古希臘的神都居住在奧林匹斯山一樣。亞拉拉特山主宰著埃里溫的天際線，亞美尼亞人稱，這是一個永恒的提示，即人類在地球上生活是因了上帝的恩澤。
看下效果:
按照列表頁的樣式引用方法，我們在news/index.css中加入一些樣式讓頁面看起來協調一些：
12345article{?padding:?10px;?}article?.info{?font-size:?0.28rem;?font-weight:?normal;?margin:?0?0?0.12rem?0;?color:?#888888;?}article?p{?text-indent:?2em;?margin:?0.6rem?0;?}article?img{?width:?100%;}.share-btn{?display:?inline-block;?background:?#ff6f6f;?width:?2rem;?height:?2rem;?text-align:?center;?color:?#fff;?font-size:?2rem;?line-height:?2rem;?padding:?5px;?border-radius:?50%;?position:?fixed;?right:?10px;?bottom:?50px;?}
![【技術教程]】【微碼開發】微碼開發入門 - 基礎模板開發](http://m.bai1xia.com/news/zb_users/cache/ly_autoimg/n/NzkxNg.jpg "【技術教程]】【微碼開發】微碼開發入門 - 基礎模板開發")
同時，在src/html/index.html中給列表加上鏈接，指向詳情頁：
1234567
注意到這個紅色的分享按鈕了嗎？接下來將調用JSAPI做一個分享功能，最終分享到群或者聊天界面顯示的是一張卡片。使用的是?HWH5.share?這個方法，來看一下參數調用：
參數類型是否必填說明typeString是類型titleString是標題h5UriString是h5頁面的UrifromString是分享來源，可以填微碼的應用名稱descString否描述，title下面會緊接一段描述文本pcUriString否PC端點擊打開的鏈接。isPCDisplay為1時，該參數為必傳參數isPCDisplayNumber否是否在PC顯示分享信息。1：顯示，0：不顯示iconURLString否分享圖標
這里面最重要的一個參數?h5Uri?就是微碼應用在CloudLink中url鏈接地址，在根目錄下的 plugin.json 中可以看到：
123456789101112{??"indexURL":?"h5://20190709172642809/html/index.html",??"appId":?"20190709172642809",??"minSdkVersionName":?"1.2.8",??"versionName":?"1.0.0",??"permissions":?[????"outerNet",????"contact",????"file",????"media"??]}
其中?indexURL?就是我們要用到的參數?h5Uri，好了，開始寫分享這一部分的代碼。
同樣的，將jquery.min.js引入詳情頁中：
123456
然后在同目錄下的index.js中實現功能：
1234567891011121314151617import?'../app';import?'./index.css';$('#shareBtn').on('click',?function?()?{??var?_shareParams?=?{????title:?'亞美尼亞?被神靈和奇跡環繞的國度',????desc:?'亞美尼亞?被神靈和奇跡環繞的國度',????h5Uri:?'h5://20190709172642809/html/index.html',????iconURL:?'https://open.welink.huaweicloud.com/wecode/image/icon/20190709/7ab9c09c-81c5-45d9-97cf-9b52cd01e676.png',????from:?'simpleDemo'??};???HWH5.share({????type:?'IM',????data:?_shareParams??}).catch(function?(error)?{????console.log('分享發生異常',?error);??});});
title 填上創建應用時填寫的應用名稱，針對于當前頁面，我填上了新聞的標題，具體情況具體對待
desc 寫上簡單的描述，針對于當前頁面，我填上了新聞的簡介
h5Uri 填上plugin.json中的?indexURL?字段值
iconURL 分享卡片中的縮略圖，在應用詳情中可以找到，也可以使用當前分享頁面的具體圖片，更為貼切
from 填上應用英文名
父級參數?type?就填寫 ‘IM’。
到這里一個簡單的新聞帶分享功能就完成了，是不是很簡單？是的，確實很簡單， 除了一些環境問題需要注意，然后就是借助JSAPI實現一些原生能力，其他的跟寫普通頁面一樣的。
下一章將記錄真機調試的過程。
WeLink 云市場 軟件開發云
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
