移动软件开发之小程序开发demo1

参考wx开发文档 可以直接去看开发者文档   开始 | 微信开放文档 (qq.com)

开发前的准备

1.注册一个开发者账号 小程序 (qq.com)

2.下载一个编译器 稳定版 Stable Build | 微信开放文档 (qq.com)

也可以用vscode装上小程序插件，但是就是没有代码提示 但是还是需要开发者工具真机预览和模拟机展示的

开始创建第一个小程序

 

 appID可以在wx开发者找到

这次任务简单用测试号进行测试就行

删除模板自己写一个简单的获取用户头像的程序

 第一步设计小程序的顶部导航

在 app.js中

可以改背景颜色 顶部框颜色 字体颜色 和字体文字

微信小程序为了简单 所以字体颜色只有黑色和白色  

页面设计

首先分析一下需求 

我们需要展示我们从微信接口中获取的头像图片和微信名称

所以我们需要一个image标签和一个view标签

在小程序里 html中的div就是view

最后我们还需要一个按钮 这个是在初次登陆是

用户点击这个按钮时候我们对用户进行授权认证来获取个人信息

具体的css样式就怎么好看怎么来吧 

可以加个class在wxss里面改样式

获取用户头像和用户名

在wx小程序里封装号了需要的方法 我们只需要调用就好了

我们需要将我们得到的数据存在data这个库里面然后在页面里直接用{{}}引用

像这样使用

注意 

在js这个文件中如果要修改data的数据 一定要使用this.setdata这个函数 不能直接修改这个变量

最后结果

这里没有登录的时候可以选一张图片 当获取到图片是替换data里的数据 就可以达到修改的目的了