微信小程序实战(2)

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

iconPath设置未选中时显示图标, selectedIconPath设置选中时显示图标,完成后基本效果为

  1. 做完底部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>
<mp-cell>
   <mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="  
    {{selectFile}}" upload="{{uplaodFile}}" files="{{files}}"  
   max-count="6" title="资料上传" tips="已加密请放心上传"></mp-uploader>
 	</mp-cell>
 	</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本身不会被创建, 不会造成污染

<block wx:if="{{ false }}">
  <text>1</text>
  <text>2</text>
  <view>3</view>
</block>

复制代码

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

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

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

<text  hidden="{{ false }}">1</text>
复制代码

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

<block wx:for="{{logs}}" wx:for-item="log">
   <text class="log-item">{{index + 1}}. {{log}}</text>
 </block>
复制代码
  1. 依照上述原理用法, 我们创建两个列表,再调整一下样式, 然后随便写一些数据, 具体如图展示

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

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

  2. 然后就是使用画布做图表, 小程序中使用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'

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

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

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

分类:
前端
标签: