微信小程序开发经验

---

准备工作

• 下载微信提供的开发者工具
• 阅读官方文档，学习小程序开发相关知识。与web开发大同小异，开发中遇到问题就找官方文档
• 可选择组件化开发框架WePY进行开发，个人认为原生工具就挺好用，适合初学者

---

UI设计

在着手UI设计时，尝试了几种原型设计工具，最终选择了墨刀。我认为它有以下优点：

• 用户交互性良好，简单易学
• UI元素相当丰富，有利于展现天马行空的想法，也能给人一定的灵感
• 提供了多样的原型模板，可供借鉴与参考
• 不仅可以设计UI，还可以设计页面内及页面间的跳转逻辑

github上也有许多优美的UI设计开源库，这里安利一下我们项目使用的库

• weui 它与微信的整体风格十分契合，布局与配色都很优美

---

底部导航

在项目中找到app.json文件，在该文件中添加以下代码

"tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/newtask/newtask",
        "text": "发布任务"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ]
  }

各字段含义如下：

• color 未选择时，底部导航文字的颜色
• selectedColor 选择时，底部导航文字的颜色
• list 导航配置数组
• pagePath 页面访问地址
• text 导航图标下方文字

效果如图

---

图标

推荐使用阿里巴巴的矢量库，因为它是免！费！的！
具体使用步骤：

• 找到喜欢的图标，加入到购物车中
  
• 进入购物车
  
• 下载代码
  
• 在下载的压缩包中找到iconfont.css文件，将该文件的内容复制到项目的app.wxss文件中
  
• 在复制的内容中，可以看到类似下面的代码，其中iconfont为图标样式icon-qian为图标的名称

.iconfont {
  font-family: "iconfont" !important;
  font-size: 48px;
  color: yellow;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-qian:before {
  content: "\e631";
}

• 在wxml文件中，用以下代码即可在界面中显示图标

<view class="iconfont icon-qian"></view>

效果如图

---

小技巧

在编写某一个界面时，在app.json文件中，找到page列表，将该界面的地址放到首位，就可以将该界面设置为初始界面，省去主页到当前开发界面的跳转