微信小程序实战(2)

1. 之前做完了登录模块三个页面的界面构成, 接下来就先把整个项目的页面给搭建一下. 首先我们需要将底部tabBars更新为5个, 分别为账单,图标,记一笔,搜素,我的.因为之前有个setting, 就作为我的, 然后index页面作为账单页面, 这样我们还需要添加三个页面, 直接在app.json中pages添加三个路径,以及在tabBars中list添加三个子项. iconPath设置未选中时显示图标, selectedIconPath设置选中时显示图标,完成后基本效果为

2. 做完底部tabBar,就可以将新创建的每个页面的标题设置一下, 这个前面有讲. 然后就可以进行页面的构建了.那么在这里, 可以使用微信官方提供的weui框架进行一些页面构成,
   developers.weixin.qq.com/miniprogram…
   通过useExtendedLib扩展库的方式 引入并使用WeUI
   1.第一步，在app.ison 中加入 useExtendedLib 字段

    "useExtendedLib": {
    "weui": true
    }
   

   2.第二步，在所需要的页面的 json 文件中 加入 usingComponents 字段

   "usingComponents": {
    "mp-uploader": "weui-miniprogram/uploader/uploader",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
    }
   

   3.第三步，在所需要的页面中调用该组件

   <mp-cells>
   

``` **使用dist下example中的flex.wxml中的结构**  3. 小程序中, **如果某一个文件超过2M的限制大小的时候, 在执行预览和真机调试的时候, 是会报错的, 比如说之前上传的项目图, 那么. 我们可以将它单独移到pic文件夹中, 然后在project.config.json配置忽略**  4. 账单页使用picker组件进行年月选择, fields表示选择器精度, 有三个参数字符串, 年月日, start和end代表在手机端显示的可选择的范围, change事件为选择后触发,  5. 账单页使用循环创建收支列表. 在小程序中同样有显示隐藏和循环遍历 1.显示与隐藏 与vue一样, 小程序同样有两种方式, 类似 if 和show **wx:if 判断是否需要渲染当前组件标签, 如果需要同时判断多个组件, 那么外层可以使用block标签包裹, block本身不会被创建, 不会造成污染** ``` 1 2 3

**同样, wx:if也可以进行多条件判断**  

// 使用 wx:if, wx:elif, wx:else进行多种条件判断,  作用类似vue的 v-if, v-else

**hidden属性用于判断组件标签是否显示, 组件在初始化时就会被创建**  

1

2.循环  
**wx:for 功能类似vue的v-for, 默认取值index, item, 如果想要更改, 可以通过wx:for-index="a", wx:for-item="b"来修改渲染指向, 同样可以使用block容器. 且wx:key进行key绑定, 作用类似 vue**

{{index + 1}}. {{log}} ```

6. 依照上述原理用法, 我们创建两个列表,再调整一下样式, 然后随便写一些数据, 具体如图展示
   写完这里, 账单页就初步完成了,当然list需要使用scroll-view这个参照文档使用就好了, 注意高度问题,然后, 因为有账单子项, 我们可以模拟一下支付宝的账单, 点击子项进入详情, 这里我们可以先在app.json中创建一个详情页, 然后给每一个子项list添加tap事件, tap事件中进行带参跳转
   跟之前说的一样, data中绑定形参属性值就能获取到想要的参数了, 参数直接拼接在跳转路径后面, 然后 在详情页.js文件中的onLoad生命周期中获取参数, options.id
   

7. 账单页中长按功能使用weui中的Dialog实现警告弹窗,详情里日期还是用之前的picker, 做完详情, 就可以接着做图表页了, 首先图表页除了最上面的年月选择器, 再用weui中的flex做支出收入,然后添加点击事件, 用于更新数据, 并且改变下滑红线的left定位,以形成滑动的效果.css的问题就不细讲了

8. 然后就是使用画布做图表, 小程序中使用canvas做图表或者海报,
   1.我们必须在wxml中定义一个canvas标签，并给他一个canvas-id

   <canvas canvas-id='customCanvas'></canvas>
   

   2.在js文件中拿到canvas的context

   var ctx = wx.createCanvasContext('customCanvas')
   

   3.绘制文本fillText/绘制图片drawImage/绘制圆形图片等等
   4.保存canvas到相册, 先用canvasToTempFilePath生成一张图片，在调用saveImageToPhotosAlbum保存到相册, 注意的是, 图片可能会没有背景色, 所以需要在canvasToTempFilePath中加上一个参数， fileType: 'jpg'

9. 言归正传, 我们这里需要画折线图和扇形图, 所以我们直接引入wx-charts插件来进行绘制.
   1.首先从github上下载wx-charts.js github.com/xiaolin3303…
   2.引入dist文件中的wx.charts.js放置到utils文件夹下
   3. 在需要的页面中使用require引入即可
   

10. 在分别使用line/pie 类型创建完图表后, *我们再完善一下 点击折线图/扇形图是改变的颜色以及图表偏移, 这里我们以图表宽为2倍, 这样再使用偏移就能很有效果的实现移动的效果了, 然后下面的支出/收入热榜同理, 也利用偏移去实现效果, 至于进度条, 可以给每个list子项添加一个下边框,比如4px宽,然后给个下划线定位到bottom-4px,就可以重合了, 那么剩下的, width设置为 当前钱/总钱 100,再加上%, 就可以实现效果了.
    

11. 基本上到这里, 图表和账单模块的内容界面就初步构建完成了.