欢迎光临,了解微信小程序开发,就上易用通!

微信小程序入门《三》实例:简易form、本地存储

发布:2018-02-03 11:17浏览: 来源:网络 作者:cola

实例内容

  • 登陆界面
  • 处理登陆表单数据
  • 处理登陆表单数据(异步)
  • 清除本地数据

实例一: 登陆界面

app.json中添加登陆页面pages/login/login,并设置为入口。

微信小程序入门《三》实例:简易form、本地存储(图1)

保存后,自动生成相关文件(挺方便的)。

微信小程序入门《三》实例:简易form、本地存储(图2)

修改视图文件login.wxml


  1. <!--pages/login/login.wxml-->
  2. <view class="container">
  3. <form bindsubmit="formSubmit">
  4. <view class="row">
  5. <text>姓 名:</text>
  6. <input type="text" name="userName" placeholder="请输入用户名" />
  7. </view>
  8. <view class="row">
  9. <text>密 码:</text>
  10. <input type="password" name="userPassword" placeholder="请输入密码" />
  11. </view>
  12. <view class="row">
  13. <button type="primary" form-type="submit">登陆</button>
  14. </view>
  15.  
  16. </form>
  17. </view>

修改登陆样式login.wxss


  1. /* pages/login/login.wxss */
  2. .container{
  3. padding: 1rem;
  4. font-size: 0.9rem;




免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。