ouc_移动软件开发_实验一

一、实验目标

 

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

二、实验步骤

1.实验前的准备工作：

(1)下载与安装微信开发者工具：对于开发微信小程序，编译器的最优选择之一便是专门应对小程序开发的微信开发者工具

(2)登录mp.weixin.qq.com网站注册小程序测试号，并且记录APPID于桌面，以便后续使用

2.进行通过快速启动模板创建小程序的实验：微信开发者工具给我们提供了很好的快速启动模板，以便于我们可以更快地进入编译环境以及省去一些繁琐的准备步骤，我们只需要为将要创建的小程序输入名称、储存地址以及APPID即可选择想要使用的模板进行小程序编写。在这次实验中我们选用JavaScript模板，并且注意不使用云服务。点击确定，便可完成新项目的创建！

 

3.在体验微信开发工具带来的便利之后，我们将文件夹里的文件全部删除，进行不使用模板来创建小程序的实验。

4.依次创建app.js app.json以及app.wxss文件，并且创建pages以及里面的index系列文件，根据不同的后缀名，index系列文件承担了不同的功能：

（1）js：负责逻辑实现

（2）json：负责标题栏和一些状态栏

（3）wxml：管理页面有什么

（4）wxss：页面排布

5.编写代码：

代码源码以及功能注释如下列出：

index.wxml源码

  //声明插入图片，源地址由’src‘给出，会在index.js中完成功能实现
  {{name}}//声明插入文本，文本内容于’name‘中给出，会在index.js中完成功能实现
  点击获取用户信息
  
  

index.wxss源码

/* 样式设计 */
.container{
  height: 100vh;/*高100的视窗 */
  display: flex;/*布局方式为flex*/
  flex-direction: column;/*垂直布局*/
  align-items: center;/*水平居中*/
  justify-content: space-around;/*垂直方向散布*/
  background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.1a092065422c6008e38ebc7cb1718dea?rik=7ZhGX3dSRRjVQg&riu=http%3a%2f%2fbpic.588ku.com%2fback_water_img%2f19%2f01%2f09%2f23c1de85dda6bf1e6f01a65c32fa1c8378.jpg&ehk=1qaOIj9DPEDUQI0c9EhsqZMbkIpKyPghS2oJOEu%2b6UY%3d&risl=&pid=ImgRaw&r=0')/*为整个页面挑选背景图片，美化页面*/
  background-repeat: repeat;/*平铺背景图*/
  background-position: center;/*将背景图进行居中*/
}/*设置container类里的各项参数*/
image{
  width: 698rpx;/*图片宽度*/
  height:698rpx;/*图片高度*/
  border-radius: 50%;/*四个角变为圆角形状*/
}/*对index.wxml里的的参数进行设置*/
text{
  font-size: 90rpx;/*字体大小设为90rpx*/
  font-family:kaiti;/*字体设置为楷体*/
  color:red;/*颜色设置为红色*/
  text-align: center;/*文本格式设置为居中*/
}/*对index.wxml里的的参数进行设置*/

index.js源码

// index.js
// 获取应用实例
const app = getApp()
​
Page({
  data: {
    src : '/images/wechat2-1.png',
    name : '欢迎使用微信'
  },
//设置初始界面
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
​
  // 获取用户信息
  getMyInfo: function(res) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          src: res.userInfo.avatarUrl,/*给出src的地址是用户信息中的头像地址*/
          name: res.userInfo.nickName/*给出名称内容为用户名*/
        })
      }
    })
  },
​
})

​app.json源码

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "navigationBarBackgroundColor": "#ffffff",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "微信登陆界面",

    "backgroundColor": "#eeeeee",

    "backgroundTextStyle": "light",

    "enablePullDownRefresh": false

  },

  "sitemapLocation": "sitemap.json"

}

三、程序运行结果

程序运行结果：程序顺利运行，但是运行灵敏度会受到网速影响

运行截图：

1.这是刚进入程序的初始页面：

2.这是点击获取用户信息后的申请界面

3.这是允许申请后所生成的界面

四、仍未解决的问题

        本次实验虽然基本完成，但是还是有一些小问题存在，比如电脑端测试环境下得点击许多次才可以获取用户信息，手机端点击获取用户信息还是非常卡顿，个人感觉不单单是网络的问题，如果代码中有什么不足的地方欢迎随时指正