開發流程 · 蜂巢云建站平臺

更新于：2018-10-31 ## 新增百度小程序的支持模版配置文件統一類微信小程序 7+ 的配置，開發方式類微信小程序 ![](https://box.kancloud.cn/71a27135717b4a73e1f12f9af7b1cae1_693x809.png) ## 開發環境代碼管理GIT——Coding **git地址：**[https://git.coding.net/chenruifu/wxapp.git](https://git.coding.net/chenruifu/wxapp.git) 小程序統一代碼管理平臺 [Coding.net](coding.net/)。沒有帳號的先去去申請。沒有權限的，可以找技術（QQ：171977332 或 QQ：410232098）這邊開通（**提供coding賬戶用戶名**）。開通的新版代碼，都會不定時更新。 **開發一版小程序，必須須在后臺有對應的站點ID源代碼（有問題比較好協作）** ![20171142279](http://oy1qrdqm7.bkt.clouddn.com/20171142279.png) ## 開始選擇小程序模版后，會有對應模版的下載地址。 ![2017114221510](http://oy1qrdqm7.bkt.clouddn.com/2017114221510.png) **修改壓縮包中的app.js文件中的app_id和token** ``` App({ app_id: 123, token: '947f1edc70c18a73ad4bb705ea9a1e34', //請求配置數據 configData:'', .... ... ``` **注意使用說明上的描述** 在微信開發工具上運行，代碼執行沒問題，在提交審核... ## 模版講解 ```html  <img src="http://file.1lwl.cn/d/2017/11/59fdbdcad9883.png" style="" title="theme1"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcadde7f.png" style="" title="theme2"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcc721ad.PNG" style="" title="theme3"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcc1d14d.PNG" style="" title="theme4"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcc7354a.png" style="" title="theme6"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcc8ec55.PNG" style="" title="theme7"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdccc2b5c.png" style="" title="theme8"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdccb7cb6.PNG" style="" title="theme9"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdce77478.PNG" style="" title="theme10"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcfe63b1.PNG" style="" title="theme11"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdd02c13c.PNG" style="" title="theme12"/> <img src="http://file.1lwl.cn/d/2017/11/59fdbdcf77e5b.PNG" style="" title="theme13"/> ``` #### 配置文件 ```json //模版配置文件1-4 {"contrast":{"cat":{"product":{"field":"product","type":"category","name":"產品中心","tips":"在小程序“產品中心”顯示"},"news":{"field":"news","type":"category","name":"新聞","tips":"在小程序“新聞”顯示"},"case":{"field":"case","type":"category","name":"案例","tips":"在小程序“案例”顯示"}},"page":{"about":{"field":"about","type":"categorypage","name":"關于我們","tips":"在小程序“關于我們”顯示"},"contact":{"field":"contact","type":"categorypage","name":"聯系我們","tips":"在小程序“聯系我們”顯示"}}},"extend":{"index_about":{"field":"index_about","type":"image","name":"首頁關于我們頂部圖片","tips":"在小程序首頁關于我們頂部圖片"},"banners1":{"field":"banners1","type":"image","name":"banners1","tips":"在小程序首頁頂部banners1信息"},"banners2":{"field":"banners2","type":"image","name":"banners2","tips":"在小程序首頁頂部banners2信息"},"banners3":{"field":"banners3","type":"image","name":"banners3","tips":"在小程序首頁頂部banners3信息"}}} //模版配置文件6 {"contrast":{"cat":{"index_item":{"field":"index_item","type":"category","name":"首頁欄目","tips":"在小程序“首頁欄目”顯示"},"page_item":{"field":"page_item","type":"category","name":"列表欄目","tips":"在小程序“服務項目”顯示"}},"page":{"about":{"field":"about","type":"categorypage","name":"關于我們","tips":"在小程序“關于我們”顯示"},"contact":{"field":"contact","type":"categorypage","name":"聯系我們","tips":"在小程序“聯系我們”顯示"},"envir":{"field":"envir","type":"categorypage","name":"環境模塊","tips":"在小程序“環境模塊”顯示"},"team":{"field":"team","type":"categorypage","name":"專家團隊","tips":"在小程序“專家團隊”顯示"}}},"extend":{"default_bottom":{"field":"default_bottom","type":"image","name":"公共底部圖片","tips":"在小程序公共底部部圖片"},"index_phone":{"field":"index_phone","type":"image","name":"首頁底部聯系電話圖片","tips":"首頁底部聯系電話圖片"},"banners1":{"field":"banners1","type":"image","name":"banners1","tips":"在小程序首頁頂部banners1信息"},"banners2":{"field":"banners2","type":"image","name":"banners2","tips":"在小程序首頁頂部banners2信息"},"banners3":{"field":"banners3","type":"image","name":"banners3","tips":"在小程序首頁頂部banners3信息"}}} //模版配置文件7+ {"contrast":{"cat":{"product":{"field":"product","type":"category","name":"產品中心","tips":"對應小程序產品中心，不能為空)"},"news":{"field":"news","type":"category","name":"新聞動態","tips":"對應小程序新聞動態，不能為空)"},"list1":{"field":"list1","type":"category","name":"列表欄目1","tips":"對應小程序列表欄目1，可以為空)"},"list2":{"field":"list2","type":"category","name":"列表欄目2","tips":"對應小程序列表欄目2，可以為空)"},"list3":{"field":"list3","type":"category","name":"列表欄目3","tips":"對應小程序列表欄目3，可以為空)"},"list4":{"field":"list4","type":"category","name":"列表欄目4","tips":"對應小程序列表欄目4，可以為空)"}},"page":{"about":{"field":"about","type":"categorypage","name":"關于我們","tips":"在小程序我們欄目-關于我們顯示(不能為空)"},"contact":{"field":"contact","type":"categorypage","name":"聯系我們","tips":"在小程序我們欄目-聯系我們顯示(不能為空)"},"leaf1":{"field":"leaf1","type":"categorypage","name":"單頁1","tips":"對應小程序單頁1，可以為空"},"leaf2":{"field":"leaf2","type":"categorypage","name":"單頁2","tips":"對應小程序單頁2，可以為空"},"leaf3":{"field":"leaf3","type":"categorypage","name":"單頁3","tips":"對應小程序單頁3，可以為空"},"leaf4":{"field":"leaf4","type":"categorypage","name":"單頁4","tips":"對應小程序單頁4，可以為空"}}},"extend":{"banners1":{"field":"banners1","type":"image","name":"banners1","tips":"在小程序首頁頂部banners1信息"},"banners2":{"field":"banners2","type":"image","name":"banners2","tips":"在小程序首頁頂部banners2信息"},"banners3":{"field":"banners3","type":"image","name":"banners3","tips":"在小程序首頁頂部banners3信息"},"my_banners":{"field":"my_banners","type":"image","name":"my_banners","tips":"對應小程序我我們欄目頂部banner"},"img_extend1":{"field":"img_extend1","type":"image","name":"擴展圖片1","tips":"對應擴展圖片1，可以放頂部或底部"},"img_extend2":{"field":"img_extend2","type":"image","name":"擴展圖片2","tips":"對應擴展圖片2，可以放頂部或底部"}}} ``` 選擇模版后，會自動把配置文件拷貝到當前開版小程序的配置文件中，如該小程序有另為需求，直接修改當前該小程序的配置文件就行。 ![2017114222547](http://oy1qrdqm7.bkt.clouddn.com/2017114222547.png) 如果要修改配置文件，請使用工具，壓縮完之后再提交。json工具：[http://www.sojson.com/](http://www.sojson.com/) #### 模版1-4配置介紹 * 自定義且**必須**3個欄目（案例展示，新聞動態，產品中心） * 自定義且**必須**2個單頁（關于我們，聯系我們） * 自定義全站頂部banner圖，默認點擊撥打電話 * 自定義首頁3張banner圖 * 自定義首頁關于我們banner圖 #### 模版6配置介紹 * 默認站點配置項（地址，聯系電話，名稱等等） * 自定義且**必須**2個欄目且欄目下都必須是單頁面（首頁展示+欄目展示） * 自定義且**必須**4個單頁（關于我們，聯系我們，環境單頁，專家團隊） * 自定義首頁3張banner圖 * 自定義公共底部banner圖 #### 模版7+配置介紹之后大都以這個配置為主，配置數據，大都能滿足需求 * 默認站點配置項（地址，聯系電話，名稱等等） * 自定義6個欄目，2個必須（新聞動態，產品中心） * 自定義6個單頁，2個必須（關于我們，聯系我們） * 自定義全站頂部banner圖，默認點擊撥打電話 * 自定義首頁3張banner圖 * 自定義我們頁面my_banners圖各模版配置一樣，但首頁獲取的數據不盡相同，具體的模版具體分解.... > 開發首頁數據調用注意點 index.js文件onShow方法。所以的數據都內置好了，需要啥數據開啟注釋即可。6個欄目數據，和6個單頁數據。列表和單頁輸出的還有其他數據，可以在控制臺Network中查看到數據展現的class可訂制，比較有擴展上，數據有的也可以多展示 ``` onShow:function(){ ... // 有需要再獲取數據 that.getProduct(6);//前臺變量：productList that.getNews(6);//前臺變量：newsList that.getList1(6);//前臺變量：list1 that.getList2(6);//前臺變量：list2 that.getList3(6);//前臺變量：list3 that.getList4(6);//前臺變量：list4 that.getLeafContact();//前臺變量：leafContactContent that.getLeafAbout();//前臺變量：leafAboutContent that.getLeaf1();//前臺變量：leaf1Content that.getLeaf2();//前臺變量：leaf2Content that.getLeaf3();//前臺變量：leaf3Content that.getLeaf4();//前臺變量：leaf4Content } ``` ``` //獲取單頁信息{{wxParseData:leaf1Content.nodes}} <view class="public_article"> <template is="wxParse" data="{{wxParseData:leaf1Content.nodes}}"/> </view> //獲取列表數據{{list1}} <view class="m_product_list"> <block wx:for="{{list1}}" wx:key="*this.id"> <view class="m_pl_box" data-id="{{item.id}}" data-bcatid="{{item.bcatid}}" data-type="product" bindtap="toArticleDetails"> <view class="m_pl_image"><image src="{{item.thumb ? item.thumb :'../../images/default_img.jpg'}}" mode="widthFix" /></view> <view class="m_pl_title">{{item.title}}</view> </view> </block> </view> ``` > 鏈接跳轉注意點 * 關于我們+聯系我們鏈接跳轉,這里是通過綁定事件通過api調整的，注意跳轉的方式： [微信小程序導航文檔](https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html) 前面幾個小程序也是都是這么處理的 ```  <view class="in_class" bindtap="linkAbout"><text>{{defaultData.aboutName}}</text></view>  <view class="in_class" bindtap="linkContact"><text>{{defaultData.contactName}}</text></view> ``` ``` //跳轉tabbar我們(關于我們) linkAbout:function(){ App.defaultData.myType='about'; wx.switchTab({ url:'/pages/my/my' }) }, //跳轉tabbar我們(聯系我們) linkContact:function(){ App.defaultData.myType='contact'; wx.switchTab({ url:'/pages/my/my' }) } ``` * 跳轉tabbar欄目列表頁**注意跳轉方式：open-type="switchTab"** ```  <navigator class="in_class" open-type="switchTab" url="../news/news"><text>{{defaultData.newsName}}</text></navigator> ``` * 跳轉列表頁(傳遞列表id跟列表名稱)**注意跳轉方式：open-type="navigate"** ```  <navigator class="in_class" open-type="navigate" url="../list/style1?catid={{configData.contrast.cat.list1.catid}}&catname={{defaultData.listName1}}"><text>{{defaultData.listName1}}</text></navigator> ``` * 跳轉單頁詳情頁(傳遞單頁id)綁定事件跳轉方式**toLeafDetails** ```  <view class="in_class" bindtap="toLeafDetails" data-catid="{{configData.contrast.page.leaf1.catid}}"><text>{{defaultData.leafName1}}</text></view> ```