移动软件开发第一课之第一个微信小程序实验报告-Toy模板网

这篇具有很好参考价值的文章主要介绍了移动软件开发第一课之第一个微信小程序实验报告。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一,实验目标

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

二,实验步骤

1,项目创建

移动软件开发第一课之第一个微信小程序实验报告

2,页面配置

移动软件开发第一课之第一个微信小程序实验报告

代码:

导航栏设计

{

    "pages": [

        "pages/index/index"

    ],

    "window": {

        "navigationBarBackgroundColor": "#663399",

        "navigationBarTitleText": "手动创建第一个小程序"

    },

    "sitemapLocation": "sitemap.json"

}

页面设计

<view class ='container'>

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

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

    <button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>

</view>

.container{

    height : 100vh;

    display : flex;

    flex-direction :column;

    align-items :center;

    justify-content : space-around;

}

3,视图设计

移动软件开发第一课之第一个微信小程序实验报告

代码:

image{

    width:300rpx;

    border-radius:50%;

}

text{

    font-size:50rpx;

}

4,逻辑实现

移动软件开发第一课之第一个微信小程序实验报告

代码:

  getMyInfo: function(e){

        let info = e.detail.userInfo;

        this.setData({

            src: info.avatarUrl,

            name:info.nickName

        })

    },

三,程序运行结果

移动软件开发第一课之第一个微信小程序实验报告