在從上乙個介面跳轉過來，會看到商品詳情這個介面goods_detail ：如下圖所示：
頁面分析：從上到下：乙個輪播圖+乙個view標籤儲存商品名和**等資訊，再下面就是把資料渲染出來的，最後面就是幾個按鈕組成的乙個絕對定位的view。
輪播圖元件
輪播圖元件在先前已經使用過了，在這裡也就不做過多的介紹；輪播圖，單擊前往
page
.detail_swiper}}
先使用 view標籤對其進行包裹，裡面的收藏是需要引入外部圖示，
<
!--商品資料--
>
="goods_price"
>￥
}<
/view>
="goods_name_row"
>
="goods_name"
>
}<
/view>
="goods_collect" bindtap =
"handlecollect"
>
="iconfont }"
>
="collect_test"
>收藏<
/view>
<
/text>
<
/view>
<
/view>
.goods_price
.goods_name_row
.goods_collect
}}
對介面獲取過來的資料直接進行渲染，使用富文字標籤使其不解析，直接在頁面上顯示效果：
="goods_info"
>
="goods_info_title"
>**詳情<
/view>
="goods_info_content"
>
"}">
<
/rich-text>
<
/view>
<
/view>
.goods_info
}
在最下方的客服、分享、立即購買的元件，嫁過來的外部圖示根據自己所選擇的圖示需要有所修改：比如 icon-fenxiang 是在style資料夾下的iconfont.wxss當中可以看到的
"btm_tool">
"toll_item">
"iconfont icon-htmal5icon31">
客服"contact">
"toll_item">
"iconfont icon-fenxiang">
分享"share">
"/pages/cart/index" class="toll_item" open-type="switchtab">
"iconfont icon-gouwuche2">
購物車 "tool_item btn_cart" bindtap = "handlecartadd">加入購物車
"tool_item btn_buy">立即購買
.btm_tool
}.btn_cart
.btn_buy
}
在先前的基礎上傳送請求獲取資料，現在data下面定義儲存資料的變數：
goodsobj:
,//儲存資料的陣列
iscollect:
false
,//表示是否被收藏過。
goodsinfo:
, //商品物件
import from "../../request/index.js"; import regeneratorruntime from "../../lib/runtime/runtime";獲取介面的時候需要傳遞引數，商品id
async
getgoodsdetail
(goods_id),}
);console.
log(goodsobj)
;this
.goodsinfo = goodsobj;
//獲取快取中收藏的陣列
let collect = wx.
getstoragesync
("collect")||
;let iscollect = collect.
some
((v)
=> v.goods_id ===
this
.goodsinfo.goods_id)
;this
.setdata(,
});}
,
onshow:
function
(options)
= current;
console.
log(goods_id)
;this
.getgoodsdetail
(goods_id);}
,
本質上就是獲取單擊輪播圖之後獲取的url，再傳遞js，根據jd當中的方法預覽；
收藏商品事件
handlecollect
(e));}
else);
}//將陣列存入快取
wx.setstoragesync
("collect"
, collect)
;//修改iscollect的值，並且填充到data中
this
.setdata();},
在單擊購物車圖示的時候給其繫結乙個單擊事件，使用快取對其進行存放，
handlecartadd
(e)else
//把資料重新快取到資料當中
wx.setstoragesync
("cart"
, cart)
; wx.
showtoast();},
文章持續更新中…
微信小程式開發 第乙個小程式
實現結果 實際上就是切換的功能 專案目錄 images是我自己建立的，新增需要在專案檔案目錄中新增 其他都是自動生成的，很容易理解，index.wxml就是主頁面，index.js和index.wxss是其附屬的 分析 index.js page button function e if this....
第乙個微信小程式
官方文件 相關原始碼 2.wxml支援以下這些特性 4.沒有雙向繫結。在vue裡面，乙個vue例項就是乙個view model view層對資料的更新，會實時反饋到model model的更新，也會實時反饋的到view。在小程式裡面，沒有雙向繫結，view的更新不會直接同步到model 需要在相關事...
微信小程式 開發入門 一
對使用者來說 3 通過掃一掃，搜尋等方式，我們用完了直接退出 與應用程式的區別在於 開發準備工作有以下幾個環節 1 首先要註冊小程式的賬號，點選註冊選擇小程式進行註冊 選擇小程式型別進行註冊 2 填寫相關郵箱並啟用 註冊郵箱並啟用 3 資訊登記，你是個人 企業 等組織型別 這人我們選擇個人，並填寫相...