1、目前小程序登录是需要主动点击按钮触发的,vant-weapp有两种弹窗可以使用,Popup 弹出层和Dialog 弹出框。我感觉Popup 弹出层容易修改一点,所以我这里用的是这个。
给默认头像那里给个点击事件,控制弹窗的隐藏显示。这里也可以直接给“点击登录”添加点击事件。
<van-popup :show="show" @close="onClose">
<div class="padding-20 is-login">
<p class="padding-10" style="font-weight: 600;">欢迎来到朝花夕拾</p>
<p class="padding-10">为提供更优质的服务,我们需要获取以下信息:</p>
<p class="desc padding-10">你的公开信息(昵称、头像等)</p>
<div class="margin-t30">
<van-button class="margin-r20" type="default" @click="cancleLogin()">取 消</van-button>
<van-button open-type="getUserInfo" type="primary" @click="confirmLogin()">确 认</van-button>
</div>
</div>
</van-popup>
vant-weapp的button按钮是是支持微信开放能力的:
所以这里的操作和小程序的button的操作是差不多的,然后获取授权和用户信息使用小程序的原生接口即可。
获取用户信息和登录的方法,直接使用微信提供的api即可。
2、van-field本身是不支持双向绑定的,所以获取input的值,需要添加绑定事件,和小程序差不多,。
我这里使用的是bind:input:
<van-popup :show="show2" @close="onClose2">
<div class="padding-20 is-login">
<van-field
:value="signature"
placeholder="请输入签名"
border="false"
@input="onInput"
/>
<div class="margin-t30">
<van-button class="margin-r20" type="default" @click="cancleEdit()">取 消</van-button>
<van-button @click="confirmEdit()" type="primary" >确 认</van-button>
</div>
</div>
值得注意的是van-field这里本身的bind:input要改成@input ,不然会报错。
onInput(val){
console.log(val.mp.detail)
},
2020-7-21前来补充。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
我发现vant-weapp里面的van-field有坑。。。。。无论是使用@input还是@change,都会出现一种情况:当你手机按键比较快的时候,会有延迟和丢失数据。
所以这里最终弃用van-field,改用小程序原生的input和textarea,因为mpvue里面是支持双向绑定的,直接使用v-model就可以了。
<textarea
class="van-cell my-textarea2"
placeholder="请填写圈子简介"
maxlength="300"
v-model="form.intro"
></textarea>
<input
class="field-index--van-field my-input"
style="border: none;width: 100%;"
v-model="form.gName"
placeholder="请填写圈子名称(不超过8个字)"
maxlength="8"
type="text">