1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 《移动软件开发》实验1:第一个微信小程序 实验报告

《移动软件开发》实验1:第一个微信小程序 实验报告

时间:2019-09-18 09:43:52

相关推荐

《移动软件开发》实验1:第一个微信小程序 实验报告

夏季《移动软件开发》实验报告

本实验报告所参考实验文档为:Docs ()

如想获得详细的制作过程,请点击上面链接。该博客仅为个人使用实验报告

(备注:将实验报告发布在博客、代码公开至 github 是加分项,不是必须做的)

一、实验目标

1、学习使用快速启动模板创建小程序的方法;

2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1、在微信小程序开发平台上注册账号,并且下载微信开放平台创建小程序。

2、根据实验文档指引对文件进行删除和修改,使该项目原有模板删去,成为空项目。

3、根据实验文档指引对小程序进行视图设计(导航栏设计、页面设计)。

4、根据实验文档指引对小程序进行逻辑实现。

5、但此时,我们发现获取到的用户信息为”微信用户,并非自己个人的用户信息。故我在CSDN上查询相关问题,得知微信在就弃用了bindgetuserInfo函数,故出现了此问题。我们改用getUserProfile得以解决。具体代码改动见“四、问题总结与体会”。

6、真机调试,成功。

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

我们发现获取到的用户信息为”微信用户,并非自己个人的用户信息。故我在CSDN上查询相关问题,得知微信在就弃用了bindgetuserInfo函数,故出现了此问题。我们改用getUserProfile得以解决。改动代码部分如下:

WXML的button部分和SJ的getMyInfo函数:

五、代码附件(部分)

index.js

//index.js

Page({

/**

* 页面的初始数据

*/

data: {

src:'/images/weixin.jpg',

name:'Hello World'

},

/**

* 自定义函数————获取微信用户信息

*/

getMyInfo:function(e){

wx.getUserProfile({

desc: '获取您的用户头像等信息',

success:res=>{

console.log("用户res:",res);

this.setData({

src:res.userInfo.avatarUrl,

name:res.userInfo.nickName

})

},

fail:res=>{

console.log("授权失败咯");

}

})

}

})

index.wxml

//index.wxml

<view class='container'>

<image src='{{src}}'mode='widthFix'></image>

<text>{{name}}</text>

<button

type='primary'

class='botton'

bindtap='getMyInfo'

>

点击获取头像昵称

</button>

</view>

index.wxss

/*index.wxss

*/

.container{

height:100vh;

display:flex;

flex-direction:column;

align-items:center;

justify-content:space-around;

}

image{

width:300rpx;

border-radius:50%;

}

text{

font-size:50rpx;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。