技術標籤：uniAPP

路由跳轉：

注意事項：uni.navigeteTo（{}）只能跳轉非tabBar頁面，跳轉tabBar頁面需要用uni.switchTab({})

路由跳轉以及資料回顯：

Uniapp中的多行單選：（核心程式碼<label><radio><radio></label>）

<view class="pay-type-list">
	<view class="type-item b-b" @click="changePayType(1)"
 
>
		<text class="icon iconfont icon-weixinzhifu"></text>
		<view class="con">
			<text class="tit">微信支付</text>
			<text>推薦使用微信支付</text>
		</view>
		<label class="radio">
			<radio value="" color=
 
"#e42208" :checked="payType == 1"></radio>
		</label>
	</view>
	<view class="type-item b-b"  @click="changePayType(2)">
		<text class="icon iconfont icon-zhifubaozhifu"></text>
		<view class="con">
			<
 
text class="tit">支付寶支付</text>
		</view>
		<label class="radio">
			<radio value="" color="#e42208" :checked="payType == 2"></radio>
		</label>
	</view>
</view>

	data() {
		return {
			payType:1
		}
	},
	methods: {
		changePayType(type){
			this.payType = type;
		},
		confirm(){
			uni.redirectTo({
				url:"/pages/pay/paySuccess"
			})
		}
	}
}

實現效果圖：

呼叫介面顯示驗證碼：封裝樣式

Vue檔案中：

	//這裡請求後臺獲取簡訊驗證碼
		let result = await getPhoneCode(that.phone)
		console.log(result);
		if(result.status == 1){
			that.$msg(`驗證碼：${result.data.code}【旺財買菜】`,5000)
		}else{
				that.$msg(result.msg)
			}
	},

在main.js中定義：

let msg = (title,duration=1500,mask=false,icon="none")=>{
	// 手機號不正確
	uni.showToast({
	    title,
	    duration,
		mask,
		icon
	});
}
// 把上面的msg掛載到vue的原型上面
Vue.prototype.$msg = msg; // this.$msg("手機號碼不正確")

實現效果如下：