移动软件开发实验一

一、实验目标

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

二、实验步骤

1、第一个微信小程序-自动创建

打开微信开发者工具，然后进入程序创建页面，并选择后端服务为不使用云服务，选择第一个模板，然后点击确定，自动创建一个小程序。

注：AppID查找方法：登录微信公众平台->开发管理->开发设置，即可看到AppID。

点击确定后，进入代码编写页面，点击编译，即可展示出获取头像的效果。

 

2、第一个微信小程序-手动创建

这里介绍两种方法手动创建微信小程序。

1.创建小程序的准备

1.1修改模板，进行手动创建微信小程序。

第一种方法是先选择模板进行小程序创建，这种方法与实验文档介绍的方法一致。

1.1.1 使用模板创建一个新的项目

1.1.2 创建页面文件

index默认代表的是小程序运行的第一个页面。此步骤进行删除app.josn内的代码。

具体操作：

1）将 app.json 文件内 pages 属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。

2) 按快捷键 Ctrl+S 保存当前修改。

1.1.3 删除和修改文件

此步骤进行模板代码的删除。

具体操作：

1）删除 utils 文件夹及其内部所有内容。

2）删除 pages 文件夹下的 logs 目录及其内部所有内容。

3）删除 index.wxml和 index.wxss 中的全部代码。

4）删除 index.js 中的全部代码,并且输入关键词“page”找到第五个选项按回车键让其自动补全函数。

 

5）删除app.wxss 中的全部代码。

6）删除 app.js 中的全部代码,并且输入关键词“app”找到第三个选项按回车键让其自动补全函数。

按上述步骤进行修改后的页面展示：

1.2 不使用模板创建小程序

由于微信开发者工具的更新，可以直接不使用模板进行创建。

1.2.1修改文件

1）删除 index.wxml和 index.wxss 中的全部代码。

2）在index.js内输入关键词“page”找到第五个选项按回车键让其自动补全函数。

3）删除app.wxss 中的全部代码。

4）删除 app.js 中的全部代码,并且输入关键词“app”找到第三个选项按回车键让其自动补全函数。

2.视图设计

2.1导航栏设计

修改app.josn中的window属性修改"navigationBarBackgroundColor"为"#ffc0cb"，"navigationBarTextStyle"为"white",

"navigationBarTitleText"为"手动创建第一个小程序"，可以更改为粉红色背景，白色字体，效果如下图所示。

代码如下：

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffc0cb",
    "navigationBarTitleText": "手动创建第一个小程序",
    "navigationBarTextStyle":"white"
  },

2.2页面设计

在界面上设计三部分，图片、文本框、按钮。其中图片用来显示头像，文本框用来显示昵称，按钮作为启动组件，即点击按钮再点击允许后，即可显示头像和昵称。

先使用image,text,button组件进行页面设计。在index.wxml中代码如下

<view class="container">
  <image src='{{src}}'></image>  /*src为图片变量的名称*/
  <text>{{name}}</text>         /*name为昵称变量的名称*/
  <button bindtap="getUserProfile">点击获取头像和昵称</button> /*getUserProfile为获取用户信息的方法*/
</view>

再在index.wxss内进行页面布局的调整，相关代码如下

/*样式设计*/
.container{
  height:100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
image{
  width:500rpx;
  border-radius: 50%;/*4个角变为圆角形状*/
}
text{
  font-size: 50rpx;
}

再创建images文件夹，用来储存图片，我们先储存一张微信头像初始图片，命名为weixin.png。

然后在index.js内进行逻辑描述，先在data内进行数据初始化。

data: {
    src:'/images/weixin.png',
    name:'0'
  },

此时页面展示为初始状态

然后编写getUserProfile进行数据更新

async getUserProfile(e) {
    const res=await wx.getUserProfile({
      desc: '用于完善资料',
    });
    console.log(res)
    this.setData({
      src:res.userInfo.avatarUrl,
      name:res.userInfo.nickName
    })
  }

最后运行，点击按钮后，再点击允许，即可获取头像和昵称。

3、完整源代码展示

app.json代码

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffc0cb",
    "navigationBarTitleText": "手动创建第一个小程序",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

​

index.js代码

Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    src:'/images/weixin.png',
    name:'0'
  },
    
  async getUserProfile(e) {
    const res=await wx.getUserProfile({
      desc: '用于完善资料',
    });
    console.log(res)
    this.setData({
      src:res.userInfo.avatarUrl,
      name:res.userInfo.nickName
    })
  },
  
})

index.wxml代码 

Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    src:'/images/weixin.png',
    name:'0'
  },
    
  async getUserProfile(e) {
    const res=await wx.getUserProfile({
      desc: '用于完善资料',
    });
    console.log(res)
    this.setData({
      src:res.userInfo.avatarUrl,
      name:res.userInfo.nickName
    })
  },
  
})

index.wxss代码

/*样式设计*/
.container{
  height:100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
image{
  width:500rpx;
  border-radius: 50%;/*4个角变为圆角形状*/
}
text{
  font-size: 50rpx;
}

三、程序运行结果

四、问题总结与体会

在实验过程中，逻辑层的渲染遇到问题，获取微信用户信息后，没有正确地修改图片变量以及昵称变量，通过查询资料和询问同学，编写修改变量部分，成功获取用户信息并显示出来。在学习新事物的过程中，我们或多或少会遇到一定的困难，和同学讨论以及上网查询资料是解决问题的有效方法。在此次实验中，学会了使用button的bindtap来绑定事件，并在逻辑层中调用获取用户信息的函数，用以修改变量。