?點(diǎn)擊觀看視頻課程 ↓↓↓

微信小程序首頁(yè)完善https://www.zhihu.com/video/1195308096099282944

課程文字版

1、template 部分

（1）修改template部分的代碼

template里面包含html代碼，對(duì)應(yīng)著原生小程序框架里中的.wxml文件。我們將index.vue文件中的template部分的代碼修改成下面的代碼

<template><div><div class="show"><div class="mark-text">當(dāng)前分?jǐn)?shù)</div><div class="mark">{{mark}}</div></div><div class="row"><div class="right button" @click='addMark(1)'>+ 1</div><div class="left button" @click='addMark(-1)'>- 1</div></div><div class="row"><div class="right button" @click='addMark(5)'>+ 5</div><div class="left button" @click='addMark(-5)'>- 5</div></div></div> </template>

（2）在<template/>標(biāo)簽下只能有一個(gè)子節(jié)點(diǎn)元素

html的所有代碼必須包含在一個(gè) html 標(biāo)簽中，如果寫多個(gè)如<div/>這樣的標(biāo)簽則會(huì)報(bào)錯(cuò)，如下所示：

正確示例

<template> <div><div>//html頁(yè)面代碼</div> </div> </template>

錯(cuò)誤示例

<template> <div>//html頁(yè)面代碼 </div> <div>//html頁(yè)面代碼 </div> </template>

（3）雙大括號(hào){{ }}

<div class="mark">{{mark}}</div>雙大括號(hào){{ }}會(huì)將數(shù)據(jù)解釋為普通文本，而非 HTML 代碼。里面一般包裹的是vue.js的變量或者方法，這些變量、方法要先在script里面定義

（4）點(diǎn)擊事件@click

<div class="right button" @click='addMark(1)'>+ 1</div>@click是v-on:click的縮寫，是給html標(biāo)簽添加的點(diǎn)擊事件，addMark(1)是在script里面的method對(duì)象中定義的方法

2、script 部分

（1）修改script部分的代碼

script里面包含js代碼，對(duì)應(yīng)著原生小程序框架里中的.js文件。我們將index.vue文件中的script部分的代碼修改成下面的代碼

<script>export default {data () {return {mark: 0}},methods: {addMark (add) {//this.mark = 0 + 1this.mark = this.mark + addconsole.log("mark",this.mark) }}} </script>

（2）data對(duì)象

data里面定義的是數(shù)據(jù)，我們?cè)谶@里定義了mark并賦值為0。在 template中，通過(guò){{mark}}來(lái)使用數(shù)據(jù)。在script的methods對(duì)象中，通過(guò)this.mark來(lái)使用數(shù)據(jù)

data () {return {mark: 0} }

data 選項(xiàng)必須是一個(gè)函數(shù)，不然vue實(shí)例之間可能會(huì)相互影響。比如，像下面這樣定義就是錯(cuò)誤的~

data: { mark: 0 }

（3）methods對(duì)象

methods對(duì)象里面定義的是vue的方法，也可以說(shuō)是函數(shù)。比如，下面代碼就表示，我們自定義了一個(gè)叫 addMark 的方法函數(shù)。add是addMark方法的參數(shù)，在template中通過(guò)@click調(diào)用的addMark(1)就是將add參數(shù)作為1，此時(shí)mark = 0 + 1 變成了1，console.log語(yǔ)句是可以將結(jié)果打印到微信開(kāi)發(fā)者工具中的控制臺(tái)，我們一般用來(lái)測(cè)試。

methods: {addMark (add) {//this.mark = 0 + 1this.mark = this.mark + addconsole.log("mark為：",this.mark) } }

3、style 部分

script部分比較簡(jiǎn)單，里面包含css代碼，對(duì)應(yīng)著原生小程序框架里中的.wxss文件。就是將template里出現(xiàn)的html元素加一些樣式。我們將index.vue文件中的script部分的代碼修改成下面的代碼。

（1）安裝sass插件

我們?cè)趕tyle標(biāo)簽中加入lang='scss'，用來(lái)支持scss語(yǔ)言的運(yùn)行環(huán)境。如果沒(méi)有安裝sass插件，啟動(dòng)npm run dev會(huì)報(bào)錯(cuò)，我們先打開(kāi)終端安裝一下scss插件

//打開(kāi)項(xiàng)目目錄 ~$ cd WeChatProjects/truth_hold//在項(xiàng)目目錄中安裝sass插件 ~/WeChatProjects/truth_hold$ npm install sass-loader node-sass --save-dev scss可以看成是css的擴(kuò)展語(yǔ)言，比css更加簡(jiǎn)潔靈活。即使你是css零基礎(chǔ)，也可以直接學(xué)習(xí)scss。

（2）添加樣式代碼

<style lang='scss'> .show{text-align:center;height:266px;background: #EA5149;margin-bottom:5px;color: #FFFFFF;font-weight:bold;.mark-text{font-size: 20px;padding:28px;}.mark{font-size: 88px;} } .row{margin: 40px 56px;.button{width: 70px;height: 70px;line-height:70px;border-radius: 20%;border: none;text-align:center;font-size: 25px;color:#FFFFFF;font-weight:bold;} } .right{background:#EA5149;float: right; } .left{background:#feb600;margin-right:80px; } </style>Vue官方文檔https://cn.vuejs.org/v2/guide/

如果以前沒(méi)有接觸過(guò)vue，可能看到vue代碼會(huì)有點(diǎn)懵，建議花點(diǎn)時(shí)間看一下vue 的官方文檔，對(duì)vue有一個(gè)大概的認(rèn)識(shí)，不然下面的學(xué)習(xí)可能會(huì)比較困難。

4、測(cè)試效果

先在項(xiàng)目目錄中運(yùn)行npm run dev

~/WeChatProjects/truth_hold$ npm run dev

在微信開(kāi)發(fā)者工具中點(diǎn)擊加減按鈕，會(huì)看到以下效果

5、index.vue代碼示例

最后將index.vue文件中的代碼貼出來(lái)，大家對(duì)比一下，自己添加的是否正確

<template><div><div class="show"><div class="mark-text">當(dāng)前分?jǐn)?shù)</div><div class="mark">{{mark}}</div></div><div class="row"><div class="right button" @click='addMark(1)'>+ 1</div><div class="left button" @click='addMark(-1)'>- 1</div></div><div class="row"><div class="right button" @click='addMark(5)'>+ 5</div><div class="left button" @click='addMark(-5)'>- 5</div></div></div></template> <script>export default {data () {return {mark: 0}},methods: {addMark (add) {//this.mark = 0 + 1this.mark = this.mark + addconsole.log("mark為：",this.mark)}}} </script><style lang='scss'> .show{text-align:center;height:266px;background: #EA5149;margin-bottom:5px;color: #FFFFFF;font-weight:bold;.mark-text{font-size: 20px;padding:28px;}.mark{font-size: 88px;} } .row{margin: 40px 56px;.button{width: 70px;height: 70px;line-height:70px;border-radius: 20%;border: none;text-align:center;font-size: 25px;color:#FFFFFF;font-weight:bold;}.right{background:#EA5149;float: right;}.left{background:#feb600;margin-right:80px;} } </style>關(guān)注【貓寧一】公眾號(hào)回復(fù)【課件】領(lǐng)取課程PPT和小程序源碼
B站可以1.5倍加速觀看視頻課程微信小程序?qū)崙?zhàn)開(kāi)發(fā)課程【提供源碼】實(shí)際上線項(xiàng)目 mpvue+koa2_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili?www.bilibili.com

總結(jié)

以上是生活随笔為你收集整理的微信开发修改button里的字体大小_微信小程序全栈开发课程【视频版】2.2 index页面完善...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。