更新于：2018-10-31 ## 新增百度小程序的支持 模版配置文件统一类微信小程序 7+ 的配置，开发方式类微信小程序  ## 开发环境代码管理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源代码（有问题比较好协作）**  ## 开始 选择小程序模版后，会有对应模版的下载地址。  **修改压缩包中的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，可以放顶部或底部"}}} ``` 选择模版后，会自动把配置文件拷贝到当前开版小程序的配置文件中，如该小程序有另为需求，直接修改当前该小程序的配置文件就行。  如果要修改配置文件，请使用工具，压缩完之后再提交。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) 前面几个小程序也是都是这么处理的 ``` <!-- 导航跳转tabbar我们(关于我们) --> <view class="in_class" bindtap="linkAbout"><text>{{defaultData.aboutName}}</text></view> <!-- 导航跳转tabbar我们(联系我们) --> <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"** ``` <!-- 导航跳转tabbar(新闻动态)--> <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> ```