微信小程序简易模板与心得分享

最近和同学做了小程序项目，主要负责前端的实现，主要是几个常用的页面，经过大家多次讨论和修改，也具有了基本的美观和实用性。记录一下几个过程中遇到的问题和学到的小技巧，把几个可以重复利用的模板写下来，以后可能会用到。
更主要是记录自己的心得，也许可以帮助到像我一样初识小程序的朋友。。。。

一、tabBar与iconFont的使用

要设计一个多页面的小程序，简洁美观的方案可以采用小程序自带的tabBar，以底部导航栏的方式进行页面跳转。配合使用阿里家的icon，十分方便。

配置方法

tabBar小程序官方文档
简单来讲只需要在app.js中进行如下配置

"tabBar": {
   
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
   
      "selectedIconPath": "image/schedule_active.png",
      "iconPath": "image/schedule.png",
      "pagePath": "pages/scheduleView/scheduleView",
      "text": "日程"
    },
    {
   
      "selectedIconPath": "image/habit_active.png",
      "iconPath": "image/habit.png",
      "pagePath": "pages/habitView/habitView",
      "text": "习惯"
    },
    {
   
      "selectedIconPath": "image/mine_active.png",
      "iconPath": "image/mine.png",
      "pagePath": "pages/mineView/mineView",
      "text": "我"
    }
  ]
},

参数都是本意，很好理解，
要注意的是Icon的配置，可以参照我另一篇博客
IconFont使用记录
tabbar这里只用下载所需icon的png文件即可，路径正确即可

（PS：可以直接用iconfont制作选中时的图片，原图稍微改变一下底色，就可以拿来用。）

---

二、weui样式的使用

开发小程序应该知道，微信有一套自家专门给小程序量身打造的样式表，可以完美兼容小程序的环境（废话）。weui官方文档 查看源码，官方提供的方法是下载到本地然后用开发者工具打开。github地址
wxss的使用：下载后app.wxss全局引入即可

@import 'weui.wxss';

样式一：加入自定义icon的列表

WXML

 <view class="weui-panel weui-panel_access">
 <view wx:for="{
    {schedules}}" class="weui-media-box weui-media-box_appmsg">
        <iconfont wx:if="{
    {info.isFinish ==0}}" bindtap="ChangeIcon" name="weiwancheng"  class="icon"></iconfont>
          <iconfont wx:if&#