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

第三章：我的页面模块开发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.enter_year}}</view></navigator></view>

3.3我的页面实现

●userinfo的值是通过向后台访问请求，获取到的用户信息，并存在本地，然后从本地读取出来进行赋值。该请求的代码写在app.js中，具体代码如下：wx.request({url:'/index.php/Api/User/getInfo',data:{'openid':res.data.openid,},success:function(res1){wx.setStorageSync('userInfo',res1.data.data)},})

3.3我的页面实现

●myinfo.js文件的data数组中定义userinfo，并在onLoad函数中对userinfo变量进行赋值，具有代码如下:Page({/***页面的初始数据*/data:{userinfo:{}},/***生命周期函数--监听页面加载*/onLoad:function(options){this.setData({userinfo:wx.getStorageSync('userInfo')})}

3.3我的页面实现●

编译后发现，头像显示过大

●因此需要对媒体组件image中自定义类“head_img”，调整图片大小，其中myinfo.wxss文件的代码如下：.head_img{height:

120rpx;width:

120rpx;border-radius:

50%;}★我的页面就能正常显示了。感谢聆听！第四章：修改我的信息模块开发ontents目录myInfo页面调整01change页面配置02C新建change页面0304配置文件的使用课前讨论浙江省数字化改革2022年7月13日上午，全省数字经济高质量发展大会在杭州召开

数字经济是新经济革命，是经济竞争、科技创新和制度变革的主战场，是经济增长的快变量、未来经济的增长极，是创新力竞争力的关键点，是推动社会变革的主引擎。2022年7月13日上午，全省数字经济高质量发展大会在杭州召开。省委书记袁家军在会上强调，要深入学习贯彻习近平总书记关于数字经济的重要论述精神，认真落实省第十五次党代会精神，以数字化改革为牵引，以科技创新为动力，深化国家数字经济创新发展试验区建设，全面建设数字经济强省，加快构建以数字经济为核心的现代化经济体系，加快打造数字变革高地，为全国数字经济发展探索新路径，为我省推进“两个先行”提供强大引擎，率先构建全民共享、引领未来、彰显制度优势的数字文明。工作报告中的数字化转型“大力发展数字经济，提升常态化监管水平，支持平台经济发展。”3月5日，国务院总理李克强在政府工作报告中再次提出发展数字经济，并强调监管常态化。数字经济是近年来我国重点推进的领域之一。31省市的2023年政府工作报告陆续出炉，明确了2023年及今后五年的重点工作，多处提及数字产业、数字经济的相关内容。

从2017年首次写入政府工作报告，到今年“数字经济”一词已经四次写入政府工作报告，中国数字经济发展如火如荼。

李克强在政府工作报告中指出，五年来，我们扩大国内有效需求，推进区域协调发展和新型城镇化。“推动线上线下消费深度融合，实物商品网上零售额占社会消费品零售总额的比重从15.8%提高到27.2%。发展城市社区便民商业，完善农村快递物流配送体系”数字化改革中的挑战——以企业为例1.战略缺位，转型缺乏方向。部分企业没找到未来竞争的着眼点与商业模式。2.能力难建，转型难以深入。企业原有的系统老旧，管理制度传统，流程复杂，数字化转型底座不牢，在原有基础上修补往往出现无法兼容的问题，推倒重建又容易对企业经营造成“伤筋动骨”的损失。3.价值难现，投入无法持续。数字化转型是涉及企业全业务、跨职能的系统性改革工程。企业只有全面部署、系统深入才能最大化解锁和释放数字价值。对企业数字化转型的建议：第一，战略为先，紧握业务。企业首先要解决的是发展问题和路径问题，找到自身的竞争优势，定义未来的商业模式，明确自身转型之路，基于业务构想设计数字化转型的愿景和顶层战略。第二，云筑底座，加速创新。对于中国企业而言，上云不再是对未来的畅想与计划，而是迫在眉睫的要务，是数字化转型的关键。第三，体验至上，全链驱动。出色的体验已不再完全由产品和服务决定，企业需要全面推广“客户需求至上”的体验文化。微信小程序助力企业进行数字化转型

1.营销方面：小程序能与微信中的公众号、朋友圈、视频号等功能连接起来，把上面的用户导流到自己的小程序中，小程序还可以帮企业提供涵盖图文、音频、短视频等多种内容的营销渠道，连接不同的用户场景。2.社区运营：社区运营可以提高企业品牌的知名度，提升用户的复购率，商家可以把小程序做为用户购买商品的工具和入口，小程序自带的核销功能，能完美的帮助商家转化客户，让客户在线付款。3.大流量池：微信最为最大的社交软件，微信用户已达十亿，日活八亿，小程序处于微信的生态圈里，可以完美的利用微信的流量池，公众号、视频号、朋友圈。微信群中的流量，也都可以被小程序使用，让企业通过小程序进行盈利。数字化人才需要具备哪些能力

1.具有数字化战略头脑：数字化战略头脑主要体现在大局意识、前瞻洞察、统筹规划三个层面。可以认识到，数字化是工具，而不是方向和目的。2.具有数字化思维：数字化思维主要体现在概念思考、系统思考、数据敏感三个层面。①“概念思考”面对各方面的模糊性、不确定性，仍然有清晰的概念和框架思考，能在模糊的情景中基于数据寻找到确定性；能够分辨出哪些数据有用有效有价值。②“系统思考”，把握问题内在本质，多视角、多维度考虑问题，并根据不同角度给出结果。③数据敏感，能敏锐觉察行业、公司中的数据变化，能透视数据变化背后的原因和逻辑，并针对性地采取有效应对措施。

企业数字化转型，人才是至关重要的一环。数据显示，截止2022年9月，国内已有近70%的企业已开启了数字化转型，约有65.5%的企业在数字化人才方面的培训需求呈现出增长的态势。3.具备数字化执行能力：数字化执行主要体现在结果导向、在线协作、灵活应变三个层面。①“结果导向”，把结果作为衡量行为的重要标准，不过于关注过程。②“在线协作”，能借助科技的手段，通过在线远程交流、协作，实现内外部的问题解决与资源调配。③“灵活应变”，思维迅速，反应敏捷，面对突发事件和问题，能灵活应对。myInfo页面调整01ranspageT浙江工商大学4.1.1性别信息显示调整●没调整之前，“性别”这一栏显示的是2，而不是男或女。这是由于性别是微信从用户所注册的微信中获取的，并且以数字方式保存在数据库中。4.1.1性别信息显示调整

浙江工商大学（1）在myinfo.js的data{}中设一个数组来显示用户

的性别信息，其中0对应“保密”、1对应“男”、2对应“女”。代码如下：data:

{userinfo:{

},sex_array:['保密',

'男',

'女']

},

（2）myinfo,wxml中“性别”一栏对应的变量从{{userinfo.sex}}变{{sex_array[userinfo.sex]}}，

这样我的页面就可以正常显示性别了。●解决方法浙江工商大学4.1.2增加页面跳转

要完成页面跳转，只需要给navigator组件的url属性添加跳转链接，使得点击需要修改的信息时，跳转至change页面，以“姓名”为例，代码如下：<navigatorurl="./change?changeWhat=name"

class="weui-cellweui-cell_access"

hover-class="weui-cell_active"><viewclass="weui-cell

bd">姓名</view><viewclass="weui-cell

ftweui-cell

ft_in-access">{{}}</view></navigator>其中跳转路径中带了changWhat参数，且changWhat=name，实现带参跳转，以便后续识别修改的是什么信息。另外手机号、性别、学校、学号和入学年份的跳转路径中的changeWhat参数的值分别为tel、sex、school、number和enter_year。浙江工商大学4.1.2增加页面跳转还有一个头像信息的修改，豆豆云助教中暂时不支持修改头像的功能，因此“头像”的navigator组件中的url属性就不需要了，另外给它添加一个bindtap的事件处理函数，使得点击头像时，提示“头像暂不支持修改”，但是发现删了url属性之后，单击“头像”按钮时，会报错。4.1.2增加页面跳转

浙江工商大学将navigator组件改为view组件，具体代码如下：myinfo.wxml文件：<viewclass="weui-cellweui-cell_access"hover-class="weui-cell_active"

bindtap="choseImage"><viewclass="weui-cell

bd">头像</view><viewclass="weui-cell

ft

weui-cell

ft_in-access"><imageclass="head_img"src="{{userinfo.head_img?userinfo.head_img:'/images/default_head_circle.png'}}"></image></view></view>myinfo.js文件：choseImage:function(){this.openAlert("头像暂不支持修改")},openAlert:function(e){wx.showToast({title:

e,icon:"none",duration:

2000})},4.2.1change页面布局

浙江工商大学change页面的也相对简单，只要一个简单的文本框即可，页面最终效果。4.2新建change页面

02ranspageT浙江工商大学4.2.1change页面布局在WeUI样式库的表单--input中，会发现找不到完全相同的样式，但是可以找到两个与页面最终效果相似的表单输入。浙江工商大学4.2.1change页面布局

将这两个表单输入的样式对应的wxml文件代码，拷贝doudouyun项目中，具体代码如下：<viewclass="weui-cells

weui-cells_after-title"><viewclass="weui-cell

weui-cell_input"><view

class="weui-cell

bd"><input

class="weui-input"placeholder="请输入文本"

/></view><view

class="weui-cell

ft"><view

class="weui-vcode-btn">保存</view></view></view></view>浙江工商大学4.2.1change页面逻辑为了用户的使用友好性，需要对change

页面的输入框placeholder与导航栏标题文字进行处理，使得用户进入修改页面时，可以从placeholder与导航标题中了解自己需要修改的是什么信息。另外在输入框中显示用户原本的信息，以便用户在修改信息时可以看到原本的信息，在原有信息基础上进行修改。浙江工商大学4.2.1change页面逻辑1.将change.wxml

文件中input

组件的placeholder

属性值进行修改，将原来的”请输入文本”改为变量”{{placeholder}}“，并增加value

属性，