微信小程序开发边做边学 课件 操作篇-微信小程序第3章 我的页面模块开发

第三章：我的页面模块开发ontents目录授权登录页面01我的页面02C注册页面03课前讨论杭州建德大量个人信息泄露2023年1月，杭州建德网警在工作中发现，建德市辖区大量人口居住、拆迁安置等公民个人信息被泄露。

建德网警立即围绕信息特征进行循线追踪，成功挖掘一个涉及小区物业、房地产商、装修公司、建材家居、广告公司等多行业的侵犯公民个人信息犯罪团伙。该团伙成员以营利为目的，长期在微信、QQ等平台通过购销、交换等方式非法处置公民个人信息，形成一份信息为多人共同持有使用的局面。团伙内小区物业、房地产商等从业人员主要负责收集、兜售、提供公民个人信息；装修公司、建材家居、广告公司等主要负责购买、接收、使用公民个人信息，同时部分继续兜售，形成流通共享。2023年2月9日，杭州市公安局网警分局会同建德警方联动开展集中收网。行动查获涉案单位10家，抓获犯罪嫌疑人15人（采取刑事强制措施13人），查扣电子设备16件、纸质公民个人信息名单1000余张，提取电子名单100余份，涉及公民个人信息30余万条。美国对西工大网络攻击2022年9月5日，国家计算机病毒应急处理中心和360公司分别发布了关于西北工业大学遭受境外网络攻击的调查报告。调查发现，美国国家安全局（NSA）下属的特定入侵行动办公室（TAO）使用了40余种不同的专属网络攻击武器，持续对西北工业大学开展攻击窃密，窃取该校关键网络设备配置、网管数据、运维数据等核心技术数据。NSA的手不止一次！

调查报告发布当天，外交部发言人毛宁在例行记者会上回答相关提问时，明确表示调查报告揭露了美国政府对中国进行网络攻击的又一实例，美方行径严重危害中国国家安全和公民个人信息安全。

她同时指出，美方还长期对中国的手机用户进行无差别语音监听，非法窃取手机用户的短信内容，并对其进行无线定位。敲响警钟：网络安全应被更加看重

“国家网络安全工作要坚持网络安全为人民、网络安全靠人民，保障个人信息安全，维护公民在网络空间的合法权益。”习近平总书记始终高度重视网络安全和信息化工作，提出了一系列新思想新观点新论断。自2014年以来，我国多部门共同连续举办国家网络安全宣传周，让“网络安全为人民，网络安全靠人民”的理念深入人心，不断提升全民网络安全意识和防护技能。

互联网时代，美国长期滥用技术优势，在全球范围内实施大规模、有组织、无差别的网络窃密、监控和攻击，以维护其霸权体系，已成为名副其实的“黑客帝国”。像TAO，为NSA于1997年顺应互联网技术发展形势组建而成。NSA对TAO一开始的职能定位，就是对其他国家进行计算机网络侦察活动。人人有责：筑牢网络安全防线二、如何预防网络诈骗？1、给自己的电脑和手机安装杀毒软件2、在网上购物，要选择正规，大型电商3、在网站注册账号时，只填带号的必填项4、尽是不要"蹭网”，不要连接公共场所的未知WIFI5、不要把个人敏感照片，敏感信息上传到云端

一、如何防范个人信息泄露?1、来路不明的软件不要随便安装。2、使用智能手机时，不要修改手机中的系统文件。3、不要随便参加注册信息获赠品的网络活动。4、网购最好去大型购物网站。5、设置高保密强度密码。6、不同网站最好设不同的密码。7、网银、网购的支付密码最好定期更换。8、尽量不在网上留真实信息。9、设置专门用来注册网站的邮箱或手机号。10、不要向QQ、微信上的陌生网友透露真实姓名。11.、朋友圈晒照片，尽量不晒包含个人信息的照片授权登录页面01ranspageT3.1授权登录页面新建项目时，建议开发者自定义项目名称，并且在存放小程序项目的目录下新建一个空的文件夹，选择项目目录时，选择该文件夹，这样方便之后寻找项目。比如项目名称命名为doudouyun，与项目相关。◆新建一个项目右击pages，单击“新建目录”按钮，并命名为register。然后右击register目录，单击“新建Page”按钮，并命名为userlogin。3.1授权登录页面◆新建userlogin页面（1）userlogin.wxml代码3.1授权登录页面◆userlogin页面开发（2）userlogin.wxss代码

（3）userlogin.json代码

<!--userlogin.wxml--><view

class="container"><view

class="usermotto"><text

class="user-motto">微信授权</text></view><view

class="userinfo"><button

wx:if="{{!hasUserInfo&&canIUse}}"

open-type="getUserInfo"

bindgetuserinfo="getUserInfo">点击授权登录</button></view></view/**userlogin.wxss**/.userinfo{display:flex;flex-direction:column;align-items:center;}.usermotto{margin-top:150px;text-align:center;}{"navigationBarTitleText":"授权页面"}userlogin页面的逻辑与helloworld小程序中index页面的逻辑基本一样，只是简单调整了一下3.1授权登录页面（4）userlogin.js代码直接删除原有的事件处理函数bindViewTap，在onLoad函数最后加上一个判断语句,判断当hasUserInfo!=false时跳转至register页面，即注册页面，具体代码:if(this.data.hasUserInfo){wx.navigateTo({url:'./register',})}另外getUserInfo函数中也相应加上一个页面跳转wx.navigateTo()getUserInfo:function(e){wx.navigateTo({url:'./register',})app.globalData.userInfo=e.detail.userInfothis.setData({userInfo:e.detail.userInfo,hasUserInfo:true})}3.1授权登录页面

授权登录页面的效果图如果发现之前已经授权过了，看不到想要的授权页面，可以单击击工具栏中间区域的“清缓存”按钮，来清除授权记录。

3.1授权登录页面

◆app.js除了完成userlogin页面的开发，还需要对app.js文件进行修改，首先是wx.login()方法中需要完善，才能实现小程序登录功能，最终代码如右所示：注意，wx.request()的data数组中，from对应的是appid，因此后面appid的值需要改成开发者自己的appid。

3.1授权登录页面

编译一下后，会发现Console面板会提示错误。单击工具栏右侧区域的“详情”按钮，勾选“不校验合法域名”即可。

3.1授权登录页面勾选“不校验合法域名”后，重新编译一次，发现Console面板提示“该appid未注册”。需要前/index.php/Page/Index/register进行进行使用注册。调用该接口需要2个参数，即开发者的appid与appsecret。

3.1授权登录页面

填写appid与appsecret后，单击“Submit”按钮即可完成api接口注册。api接口注册完成后，重新编译代码即可看到Console面板中wx.request()的返回值，主要包括了is_login、is_register和openid。用户的第一次进入到授权登录页面的跳转逻辑已经完成。注册页面

02ranspageT

3.2注册页面

●

在register目录下，右击register，单击“新建Page”，并命名为register。

●去WeUI基础样式库找到对应的样式，其中姓名、手机号、学校、学号和入学年份是一个输入框，对应的是WeUI中表单--input里面的一种样式。注册页面效果图

3.2注册页面

●

单击模拟器下方“打开”按钮，即可在编辑器的目录结构区找到该页面对应的目录，打开input.wxml文件，找到该样式对应的代码。

3.2注册页面

●单击模拟器下方“打开”按钮，即可在编辑器的目录结构区找到该页面对应的目录，打开input.wxml文件，找到该样式对应的代码。将其拷贝至doudouyun项目的register.wxml，其中这段代码最后还少了一个</view>，作为最开始<view>的结束。

3.2注册页面

●以姓名的input为例，其他都与姓名的操作一致，代码如下。register.wxml代码：<view

class="weui-cellsweui-cells_after-title"><view

class="weui-cellweui-cell_input"><view

class="weui-cell__hd"><view

class="weui-label">姓名</view></view><view

class="weui-cell__bd"><input

class="weui-input"

placeholder="请输入姓名"

bindchange="changeName"/></view></view></view>register.js代码：Page({data:{name:''},changeName:function(e){this.setData({name:e.detail.value})}})其他注册信息的输入框与姓名一样，分别加入wxml代码，并在data数组中加入对应的变量，对应bindchange函数名进行修改即可。

3.2注册页面

●除了输入框外，最后还有一个提交按钮，在WeUI样式库中的表单--button找到对应的button样式。

3.2注册页面

●在register.wxml文件的最后加上一段button的代码，具体代码如下。<view

class="page__bdpage__bd_spacingsubmit"><button

class="weui-btn"

type="primary">提交</button></view>其中第一个<view>的class类最后新加一个submit子类。●在wxss文件中写submit子类样式的相关属性，主要是为了调整提交按钮的样式。.submit{margin:

0

auto;padding-top:

15px;width:

90%;}

3.2注册页面

●提交按钮绑定的事件处理函数bindSubmit，主要是向后台发送用户注册信息，这边后台提供了一个Api接口用于将注册信息存入后台数据库。请求成功后，跳转至index页面，具体代码如右。我的页面实现03ranspageT

3.3我的页面实现

●

右击pages，单击“新建目录”按钮，命名为my，右击my目录，单击“新建Page”按钮，命名myinfo。

3.3我的页面实现

●在WeUI样式库中找到对应的样式，查找WeUI中list样式，发现要找的是带说明带跳转的列表项。我的页面效果图WeUI样式库中对应的list样式

3.3我的页面实现

●

myinfo.wxml文件中的代码：<view

class="weui-cellsweui-cells_after-title"><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">头像</view><view

class="weui-cell__ftweui-cell__ft_in-access"><image

class="head_img"

src="{{userinfo.head_img?userinfo.head_img:'/images/default_head_circle.png'}}"></image></view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">姓名</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">手机号</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.tel}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">性别</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.sex}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">学校</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.school}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">学号</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.number}}</view></navigator><navigator

url=""

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><view

class="weui-cell__bd">入学年份</view><view

class="weui-cell__ftweui-cell__ft_in-access">{{userinfo.ent