0基础写属于你的第一个微信小程序

0基础写属于你的第一个微信小程序

一、实验目标

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

二、实验步骤

1.注册微信开发者账号，获得APPID

2.下载微信开发者工具，扫码登录管理员账号，创建一个空项目，使用自带的模板即可，编译运行如下

第一个实验便完成了，下面开始第二个实验
3.重新创造一个空项目，删除模板自带的文件的内容。
在app.json中设计导航栏

  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一个手搓小程序",
    "navigationBarBackgroundColor": "#663399"
  },

4.在index.wxml中进行页面设计，并在index.wxss中调整参数，结果如下图，微信头像为空白

<view class='container'>
  <image></image>
  <text>Hello world</text>
  <button>点击获得头像和昵称</button>
</view>

.container{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
}

最后添加素材，创建文件夹images，复制粘贴一张照片来填充空白处微信头像
修改wxml文件：

<image src='/image/logo.png'mode='widthFix'></image>

在wxss文件中追加：
image{
  width:300rpx;
  border-radius:50%;
}
text{
  font-size:50rpx;
}

5.逻辑实现，完成按钮button和getMyInfo函数

<button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>点击获得头像和昵称</button>
getMyInfo:function(e){
 console.log(e.detail.userInfo)
},

保存后预览，点击console可以输出一段参数即为成功

6.使用动态数据来显示头像和昵称
修改wxml文件：

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

修改js文件

Page({
getMyInfo:function(e){
  let info=e.detail.userInfo;
  this.setData({
    src:info.avatarUrl,
    name:info.nickName
  })
},

操作结束，编译运行

三、程序运行结果

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

获取头像和信息成功

四、问题总结与体会

​ 在本次实验中，实验的最后发现无论如何都无法拉取信息成功。查阅资料发现新版本的微信已经不再支持上述功能，通过同学的帮助得知可以在本地配置中调整基础库的版本，进而解决了这个问题