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

CoffeeScript,Pug,Sass使用

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

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

启动项目

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

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

    vue init mpvue/mpvue-quickstart MergeMoney

    npm i

    或 cnpm

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

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

    或 cnpm

    修改webpack配置

    { test: /.coffee$/, loader: "coffee-loader" },

    build -> webpack.bash.conf.js下,module -> rules添加上述内容用来处理.coffee文件

    这里注意下,vue是支持直接<script lang="coffee">的,但是mpvue目前不支持,已提交issue,目前没结果

    删除原模板中无用的代码,并替换成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新增,空着即可

    启动

    npm run dev

    即可看到如下页面:

开发

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

    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 # 背景图片 }

    此时花费一点时间将页面样式铺出来,即pages/index/index.vue如下:

    <template lang="pug">.container img.bg( :src="{随机图片URL}" ) .content .coins section.row( v-for="(coin, index) of coins" :key="index" ) img.coin-img( :src="{随机图片URL}" ) 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>

    此时保存页面会报错,因为result这个变量没有,于是在pages/index/main.coffee中添加computed:

    computed: # 最终多少钱 result: -> result = this.coins.reduce ((pre, cur) -> pre + cur.priceF * (cur.count || 0)) , 0 result / 100

    恩,还少了重置的函数

    methods: clickReset: -> wx.showModal title: "提示" content: "即将重置所有数量,确定吗?" success: (res) => coin.count = "" for coin in this.coins if res.confirm

    大功告成,可以试试效果了:

如需进一步了解

全流程视频GitHub源码 欢迎Star、Fork

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

, 1, 0, 9);