zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub

CoffeeScript,Pug,Sass使用

以下内容门槛较高,如看不懂或觉得需要继续了解,结尾处放置了原视频流程与GitHub地址,欢迎琢磨与Star,谢谢。

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

启动项目

由于使用了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文件修改如下

     <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

    即可看到如下页面:

开发

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

  2. pages/index/main.coffee导入需要的资源,并放到data留着用
     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如下:
     <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
    
  5. 此时页面效果如下:

  6. 恩,还少了重置的函数
     methods:
      clickReset: ->
    wx.showModal
     title: '提示'
     content: '即将重置所有数量,确定吗?'
     success: (res) =>
      coin.count = '' for coin in this.coins if res.confirm
    
  7. 大功告成,可以试试效果了:

如需进一步了解

感谢你的耐心阅读,如有一丝的帮助,倍感欣慰。