小程序筆記二:部署
需要部署的內容
需要部署的東西有阿裏圖標、public(共享的js、wxss、wxml)、app.js、app.json、wxParse(html代碼轉view)、js插件(md5.js、base64.js)、static
阿裏圖標部署
詳細操作參考:http://www.cnblogs.com/wesky/p/7593115.html
public部署
目錄結構
area.js 存放的是網站上的省市區數組數據。為什麽會放到本地呢?原因一:小程序的ajax有時候很坑爹。原因二,省市區數據使會很頻繁,放本地比放服務器更好。原因三:小程序本身自帶的也有省市區數據,但是與商城的不符合
inc.js 存放的大部分都是跳轉,比如:跳轉首頁、分頁、會員中心、商品詳情、搜索 等js事件
menu.wxml 存放的是懸浮的通用底部菜單、商品列表盒子。只要是通用的模板盒子,都可以放著一個文件。
style.wxss 存放的是通用樣式,比如菜單樣式、商品盒子樣式、page樣式
擴展:menu.wxml 的代碼和調用
<!-- 通用底部浮窗 --> <template name="menu-footer"> <view class="fix-footer float-wrap"> <view class="float-li {{nav[0].menu}}"> <view class=‘li-text‘ catchtap="hrefHome"> <text class="iconfont icon-home{{nav[0].ico}} li-ico"></text> <text class="li-h6">首頁</text> </view> </view> <view class="float-li {{nav[3].menu}}"> <view class=‘li-text‘ catchtap="hrefCategory"> <text class="iconfont icon-fenlei{{nav[3].ico}} li-ico"></text> <text class="li-h6">分類</text> </view> </view> <view class="float-li"> <view class=‘li-text {{nav[1].menu}}‘ catchtap="hrefCart"> <text class="iconfont icon-gouwuche{{nav[1].ico}} li-ico"></text> <text class="li-h6">購物車</text> </view> </view> <view class="float-li"> <view class=‘li-text {{nav[2].menu}}‘ catchtap="hrefUser"> <text class="iconfont icon-huiyuan{{nav[2].ico}} li-ico"></text> <text class="li-h6">我的</text> </view> </view> </view> </template> <!-- 商品詳情 底部浮窗--> <template name="menu-goods"> <view style="height: 100rpx"></view> <view class="fix-goods-footer"> <view class="float-li s1 home" catchtap="hrefHome"> <text class="iconfont icon-home1 li-ico"></text> <text class="li-h6">首頁</text> </view> <view class="float-li s1 kefu" style=‘position:relative‘> <text class="iconfont icon-huiyuan li-ico"></text> <text class="li-h6" >客服</text> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:1rpx;left:1rpx;color:#ff0"> </contact-button> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:0rpx;left:50rpx;color:#ff0"> </contact-button> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:50rpx;left:1rpx;color:#ff0"> </contact-button> <contact-button class="contact" type="default-light" size="12" session-from="weapp" style="opacity:0;position:absolute;top:50rpx;left:50rpx;color:#ff0"> </contact-button> </view> <view class="float-li s1" catchtap="hrefCart" style=‘position:relative‘> <text class="iconfont icon-gouwuche1 li-ico"></text> <text class="li-h6">購物車</text> <view class="cart-number">{{carNum}}</view> </view> <view class="float-li s2 add-cart" catchtap="attrShow" data-isbuy="0">加入購物車</view> <view class="float-li s2 buy" catchtap="attrShow" data-isbuy="1">立即購買</view> </view> </template>
其它頁面調用,import導入,data是傳參:
<import src="../public/wxml/menu.wxml"/> <template is="menu-footer" data="{{nav: footNav}}"/>
app.js部署
1.所有請求的api鏈接
App({ api:[ goods:‘https://xxx.com/goods‘, // 商品數據 category:‘https://xxx.com/category‘, // 分類數據 search:‘https://xxx.com/search‘ // 搜索數據 ] })
推薦api地址部署再app.js裏面(部署再其它地方問題也不大,比如public/xxx)
2.登錄
登錄小程序功能是部署再app.js裏面的
app.json部署
主要是部署pages下的參數,這個關系到你小程序新建的文件夾及文件
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/cart/index", "pages/goods/index", "pages/user/user", "pages/address/index", "pages/address/edit", "pages/set/index", "pages/pay/index", "pages/order/index", "pages/order/info", "pages/test/index", "pages/coupon/index", "pages/coupon/user", "pages/category/index", "pages/category/goods", "pages/search/index", "pages/activity/hot" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
在這裏建立好名稱,它會自動幫你生成文件夾及文件(wxml、js、json、wxss)。
window是控制小程序的窗口參數,比如窗口顏色、導航字體顏色
wxParse部署
應用場景:小程序調用商城商品詳情。小程序本身是不支持html代碼的,有了這個插件,就可以做到兼容。
教程:http://www.cnblogs.com/wesky/p/8066233.html
js插件
md5、base64 這js插件看情況使用
重點:圖片內容不要部署本地,最好放到服務器上。小程序大小只有2M
小程序筆記二:部署