• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mpvue两小时,产出一个《点钞辅助工具》小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

代码地址如下:
http://www.demodashi.com/demo/13564.html

CoffeeScript,Pug,Sass使用

以下内容门槛较高,如看不懂或觉得需要继续了解,请前往官网查阅相关文档,谢谢。

文章不做技术语法解读,如不清楚,请前往对应官网了解细节。

启动项目

由于使用了CS,Pug,Sass等非主流方式,所以便多出了一些流程:

  1. 根据官方拉取快速启动项目,并命名为“MergeMoney”,不要vuex与eslint

    vue init mpvue/mpvue-quickstart MergeMoney

    npm i

    或 cnpm

  2. 添加CS,Pug,以及Sass的依赖

    npm i -D coffeescript coffee-loader pug pug-loader sass node-sass sass-loader

    或 cnpm

  3. 修改webpack配置

    {
    

test: /.coffee$/,
loader: 'coffee-loader'
},

> build -> webpack.bash.conf.js下,module -> rules添加上述内容用来处理.coffee文件
> 
> 这里注意下,vue是支持直接`<script lang='coffee'>`的,但是mpvue目前不支持,已提交issue,目前没结果

4. 删除原模板中无用的代码,并替换成CS,Pug与Sass

   conponents/card.vue

   pages/ 除了index全部删除

   main.js 只留`pages: ['^pages/index/main'],`

   pages/index/index.vue文件修改如下
   ```html
   <template lang='pug'>
   .container
       span normal
   </template>

   <script>
   import main from './main.coffee'

   export default {
    ...main
   }
   </script>

   <style scoped lang='sass'>
   </style>
   ```

   pages/index/main.js 不动

   pages/index/main.coffee新增,空着即可

5. 启动

   `npm run dev`

   即可看到如下页面:

   ![](https://user-gold-cdn.xitu.io/2018/6/25/16434fb4346342bc?w=387&h=685&f=png&s=5141)

### 开发

1. 在src/下新建assets文件夹,导入所需要的资源,如图:

   ![](https://user-gold-cdn.xitu.io/2018/6/25/16434fd4141e3ec9?w=952&h=204&f=png&s=87672)

2. pages/index/main.coffee导入需要的资源,并放到data留着用
   ```coffee
   import img1 from '@/assets/1.png'
   import img1j from '@/assets/1j.png'
   import img1m from '@/assets/1m.png'
   import img1y from '@/assets/1y.png'
   import img5 from '@/assets/5.png'
   import img5j from '@/assets/5j.png'
   import img5m from '@/assets/5m.png'
   import img10 from '@/assets/10.png'
   import img20 from '@/assets/20.png'
   import img50 from '@/assets/50.png'
   import img100 from '@/assets/100.png'
   import imgBg from '@/assets/bg.png'

   export default
    data: {
     # 人民币金额种类,价值单位“分”
     coins: [
      {img: img100
      count: ''
      priceF: 10000}
      {img: img50
      count: ''
      priceF: 5000}
      {img: img20
      count: ''
      priceF: 2000}
      {img: img10
      count: ''
      priceF: 1000}
      {img: img5
      count: ''
      priceF: 500}
      {img: img1
      count: ''
      priceF: 100}
      {img: img1y
      count: ''
      priceF: 100}
      {img: img5j
      count: ''
      priceF: 50}
      {img: img5m
      count: ''
      priceF: 50}
      {img: img1j
      count: ''
      priceF: 10}
      {img: img1m
      count: ''
      priceF: 10}
     ]
     imgBg # 背景图片
    }
   ```

3. 此时花费一点时间将页面样式铺出来,即pages/index/index.vue如下:
   ```html
   <template lang='pug'>
   .container
    img.bg(
     :src='imgBg'
    )
    .content
     .coins
      section.row(
       v-for='(coin, index) of coins' :key='index'
      )
       img.coin-img(
        :src='coin.img'
       )
       input.coin-count(
        placeholder-style='color: rgba(255, 255, 255, .5);'
        type='number'
        v-model='coin.count'
        placeholder='数量'
       )
     .result
      button.reset(
       @click='clickReset'
      ) 重置
      span 总金额:
      input.result-count(
       readonly
       type='number'
       :value='result'
      )
      span 元
   </template>

   <script>
   import main from './main.coffee'

   export default {
    ...main
   }
   </script>

   <style scoped lang='sass'>
   .count
    height: 84rpx
    border: 2rpx solid #FFFFFF
    border-radius: 10rpx
    text-align: center

   .container
    padding: 0
    font-size: 36rpx

    .bg
     position: absolute
     left: 0
     top: 0
     width: 100%
     height: 100%
     z-index: 0

    .content
     width: 100%
     height: 100%
     z-index: 1
     background: rgba(171,171,171,.35)

     .coins
      height: 90%
      overflow-y: auto

      .row
       position: relative
       display: flex
       justify-content: space-around
       align-items: center
       margin-top: 24rpx

       .coin-img
        width: 248rpx
        height: 110rpx

       .coin-count
        @extend .count
        width: 204rpx
        color: #fff

     .result
      display: flex
      justify-content: center
      align-items: center
      height: 10%

      .reset
       width: 60rpx
       height: 60rpx
       margin: 0 40rpx 0 0
       padding: 0
       border: 2rpx solid red
       border-radius: 30rpx
       background: transparent
       font-size: 24rpx
       color: #fff

       &:after
        border: 0

      span
       color: #fff

      .result-count
       @extend .count
       width: 360rpx
       margin: 0 40rpx
       background: #fff
   </style>
   ```

4. 此时保存页面会报错,因为result这个变量没有,于是在pages/index/main.coffee中添加computed:
   ```
   computed:
       # 最终多少钱
       result: ->
           result = this.coins.reduce ((pre, cur) ->
               pre + cur.priceF * (cur.count || 0))
           , 0
           result / 100
   ```
6. 恩,还少了重置的函数
   ```
   methods:
       clickReset: ->
           wx.showModal
               title: '提示'
               content: '即将重置所有数量,确定吗?'
               success: (res) =>
                   coin.count = '' for coin in this.coins if res.confirm
   ```
7. 大功告成,可以试试效果了:

![](https://user-gold-cdn.xitu.io/2018/6/25/1643516b03add69e?w=540&h=960&f=gif&s=3281761)

###项目文件目录截图
![](http://www.demodashi.com/contentImages/image/20180711/2iMnVkUHUNw2tR7Sa1i.jpg)
> 感谢你的耐心阅读,如有一丝的帮助,倍感欣慰。mpvue两小时,产出一个《点钞辅助工具》小程序

> 代码地址如下:<br>http://www.demodashi.com/demo/13564.html



> 注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
看大神如何玩转微信小程序日历插件?发布时间:2022-07-18
下一篇:
告白小程序制作发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap