最近我們學習了微信小程序中的顯示個人信息以及重置密碼,因爲是老師做好的接口,所以我們只需要搭好前臺頁面以及編寫好JS代碼就可以了。
以上是顯示個人信息的頁面,包含了用戶的學號,姓名,系別,班級(因爲是學生評教系統,所以顯示這些內容),可以通過點擊重置進入到修改密碼的頁面。
這就是修改密碼的頁面,通過這個頁面可以重置密碼。
以下分別是顯示個人信息頁面的代碼以及修改密碼的頁面:
<!--pages/password/password.wxml-->
<view class="all">
<form bindsubmit="formSubmit">
<view class="content">
<view class="change">
<text>請輸入原密碼:</text>
<view>
<input name="oldpwd" placeholder='請輸入您的密碼' password='true'></input>
</view>
</view>
<view class="change">
<text>請輸入新密碼:</text>
<view>
<input name="newpwd1" placeholder='請輸入您的密碼' password='true'></input>
</view>
</view>
<view class="change">
<text>請再次輸入新密碼:</text>
<view>
<input name="newpwd2" placeholder='請輸入您的密碼' password='true'></input>
</view>
</view>
</view>
<view class="section_btn">
<button form-type='submit' type="primary">提交</button>
</view>
</form>
</view>
<view class="all">
<view class="per" style="background-color:#566C93;">
<span >個人信息</span>
</view>
<view id="content">
<view class="system">
<text class='title'>學號</text>
<text class='message'>{{no}}</text>
</view>
<view class="system">
<text class='title'>姓名</text>
<text class='message'>{{name}}</text>
</view>
<view class="system">
<text class='title'>班級</text>
<text class='message'>{{classname}}</text>
</view>
<view class="system">
<text class='title'>系別</text>
<text class='message'>{{departmentname}}</text>
</view>
<view class='system'>
<text class='title'>密碼</text>
<navigator class='reset' url="../password/password">重置</navigator>
</view>
<view class='system'>
<navigator class='exit'>退出<text>>></text></navigator>
</view>
</view>
</view>
其實難點並不是搭前臺頁面,對於我這種基礎比較差的Js反而是難點,所以我會請教我的朋友幫忙。