微信小程式開發之小米商城（一）
小程式開發之小米商城Lite
剛接觸小程式不久，感覺相對來說比較簡單，就自己花了五六天做了一個專案，因為本身也是米粉，就看中了小米的微信小程式(可憐國慶擼了幾天的程式碼，哈哈)，話不多說，先上效果圖吧。 算了算了。本來還打算上gif圖，但是太難搞了，說明一下吧。要看效果的等下我貼出專案github地址來，自己去看吧
1. 專案模組
整個專案大致分為首頁，分類，發現，購物車，我的五個模組，其實就是底部導航條的五塊，
1）首頁
首頁的重點也就是一個輪播圖，然後一個全域性的底部導航條，其實微信小程式都給我們提供的元件。像輪播圖元件 swiper-item,然後底部導航條在app.json中設定tabBar都可以實現，前面我還在糾結自己如何實現一個底部導航條，然後後面各種糾結，其實就簡簡單單的配置就行，所以說文件很重要。貼一張首頁圖吧
2）分類
分類這一個模組，其實是挺讓我難下手的，先給張圖你就明白了
[
{
name:'張三'，
age:24
},
{
name:’李四'，
age:23
}
]
這種就是單一的json，就一層
[
{
name:'張三'，
age:24,
interest:
[
{ sports:'足球'},
{ sports:'籃球'}
]
},
{
name:’李四'，
age:23，
interest:
[
{ sports:'足球'},
{ sports:'籃球'}
]
}
]
差不多就這個意思，多層的在文件中是沒有說明的。
<view style='padding-top:10rpx;' wx:for='{{list}}' wx:key='{{index}}' id='nav-{{index}}' wx:for-item="itemName">
<view wx:for='{{itemName.content}}' wx:key='{{index}}'>
<template is='categoryItem' data='{{...item}}'></template>
</view>
</view>
糾結了好久，傳入了模版，我這裡循壞了兩次，去獲得裡面的值，詳細看json資料結果，反正意思就是不斷去除錯，循壞一次，只能獲得第一層的資料，迴圈了兩次，獲得第二層的，加入你說我只迴圈一次，然後通過 點（.）去吧資料點出來，這是不可能的，我試過了。 然後佈局都出來了，又碰到了怎麼錨點滑動，然後搞了好久，發現小程式有這個東西，通過scroll-view元件裡面的scroll-into-view的屬性，然後通過設定id，繫結
<scroll-view scroll-y="true" style='height:100%' scroll-with-animation="true" scroll-into-view='{{toview}}' >
<view style='padding-top:10rpx;' wx:for='{{list}}' wx:key='{{index}}' id='nav-{{index}}' wx:for-item="itemName">
<view wx:for='{{itemName.content}}' wx:key='{{index}}'>
<template is='categoryItem' data='{{...item}}'></template>
</view>
</view>
</scroll-view >
其中scroll-y="true"允許豎向滾動 height要設定，你可以試試不加這個 scroll-with-animation=“true” 滑動動畫，這裡面同通過js動態繫結id，使id值給上面的toview相同時，就會錨定定位，搞了好久，心累，不過效果出來了還是很爽的，哈哈哈。
3）發現
發現模組沒什麼講的，也加入一個template
4）購物車
5）我的
我的這裡使用了小程式的API獲得使用者頭像，名字，挺簡單的
整體的結果上述所講，其實就大部分都是佈局問題，沒有很多的用到小程式的API，後續慢慢的加上去，因為那才是小程式的重點，然後ajax也沒有用到，只是模擬資料什麼的，以後加吧。
2.專案結構
如上圖所示，datas放一些模擬的資料，json。 pages ------------頁面 static------------靜態資源（圖片） util-------------- 工具