## 一、实验目标**
1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。
## 二、实验步骤
1. 在微信公众平台<code>mp.weixin.qq.com</code>注册微信小程序并完善信息。<img src="C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20220817191525957.png" alt="image-20220817191525957" style="zoom:80%;" />
2. 下载微信开发者工具。
<img src="C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20220817191642200.png" alt="image-20220817191642200" style="zoom:80%;" />
3.创建小程序
4.学习预备知识。
> 1.全局三个文件，app*** app***on app.w***（名称不可更改）
>
> 2.创建Pages目录文件（用来存放各个页面）
>
> 3.创建页面（给页面起名字，并且创建4个文件）
>
> 页面逻辑实现
>
> json:负责标题栏和一些状态栏
>
> wxml:管理页面有什么
>
> <!--注释-->
>
> w***：页面排布
>
> 4.index.wxml把内容单元封装在view内，写法：
>
> <view> ***\*内容\**** </view>
>
> 5.需要用到三个组件：图片、文字、按钮
>
> （1）图片 <image ***\*src=\*******\*’\*******\*图片路径\*******\*’\****> </image>
>
> （2）文字<text> ***\*“\*******\*内容\*******\*”\****</text>
>
> （3）按钮<button ***\*“\*******\*属性内容\*******\*”\****> ***\*按钮上的字\****</button>
>
> ? 用到两个属性，open-type和bindgetuserinfo
>
> 6***文件中函数的定义方法
>
> 函数名+：+（参数列表（参数可不写））{
>
> 函数内容
>
> }
>
> Ps:注意两个大括号前后要有逗号，
>
> 7.wxml:变量写法{{***\*“变量名称”\****}}
>
> 8***文件中变量定义的方法：在data：{***\*定义变量\****}
>
> 规则：变量名称 + ：+ ’ + 内容 + ’
>
> 两个变量之间用，隔开
>
> 9.修改data变量的方法：this.setData（{***\*“修改变量”\****}）
>
> 规则：同上
>
> 规则：变量名称 + ：+ ’ + 内容 + ’
>
> 两个变量之间用，隔开
5.不实用模板创建小程序。
7.使用模板创建小程序，修改、添加重要文件代码块以及代码解析。
（1）<code>index***</code>
> // index***
>
> // 获取应用实例
>
> const app = getApp()
>
>
>
> Page({
>
> // 存放变量的地方：data
>
> data: {
>
> src : 'images/logo.png',
>
> name : 'Hello world'
>
> },
>
>
>
> () {
>
> if (wx.getUserProfile) {
>
> this.setData({
>
> ? canIUseGetUserPro true
>
> })
>
> }
>
> },
>
> /*
>
> //编写逻辑，调用，获取用户信息
>
> getMyInfo:(e){
>
> console.log(e.detail.userInfo)
>
> },
>
> */
>
> getMyInfo: (e) {
>
> // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，
>
> // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
>
> wx.getUserProfile({
>
> desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
>
> success: (res) => {
>
> ? console.log(res)
>
> ? //求修改data中的数据变量
>
> ? this.setData({
>
> ? src: res.userInfo.avatarUrl,//更新图片来源
>
> ? name: res.userInfo.nickName//更新昵称
>
> ? })
>
> }
>
> })
>
> },
>
> })
（2）<code>index.wxml</code>
> <!--index.wxml-->
>
> <view class="container">
> <image src='{{src}}' mode='widthFix'></image>
> <text>{{name}}</text>
> <button open-type="getUserInfo" bindtap="getMyInfo">
> 点击获取头像和昵称
> </button>
> </view>
(3)<code>index.w***</code>
> /**index.w*****/
>
> .container{
>
> height:100vh; /*高100视窗，这里写100%是无效的*/
>
> display: flex;/*flex布局方法*/
>
> flex-direction: column; /*垂直布局*/
>
> align-items: center;/*水平方向居中*/
>
> justify-content: space-around;/*垂直方向散布*/
>
> }
>
>
>
> mage{
>
> width:200rpx;/*图片宽度*/
>
> border-radius: 50%;/*边界的半径：四个角变为圆角形状*/
>
> }
>
> text{
>
> font-size:50rpx;
>
> }
（4）<code>app***on</code>
> {
>
> "pages":[
>
> "pages/index/index"
>
> ],
>
> "window":{
>
> "backgroundTextStyle":"light",
>
> "navigationBarBackgroundColor": "#663399",
>
> "navigationBarTitleText": "第一个微信小程序",
>
> "navigationBarTextStyle":"black"
>
> },
>
> "style": "v2",
>
> "sitemapLocation": "sitemap***on"
>
> }
（5）<code>app.w***</code>
> /**app.w*****/
>
> .container {
>
> height: 100%;
>
> display: flex;
>
> flex-direction: column;
>
> align-items: center;
>
> justify-content: space-between;
>
> padding: 200rpx 0;
>
> box-sizing: border-box;
>
> }
（6）.<code>app***</code>
> // app***
>
> App({
>
> onLaunch() {
>
> // 展示本地存储能力
>
> const logs = wx.getStorageSync('logs') || []
>
> logs.unshift(Date.now())
>
> wx.setStorageSync('logs', logs)
>
>
>
> // 登录
>
> wx.login({
>
> success: res => {
>
> ? // 发送 res.code 到后台换取 openId, sessi, unionId
>
> }
>
> })
>
> },
>
> globalData: {
>
> userInfo: null
>
> }
>
> })
8.过程截图
（1）开始页面
<img src="C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20220817194453370.png" alt="image-20220817194453370" style="zoom:80%;" />
（2）新建images，上传图片logo.png。
<img src="C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20220817194902212.png" alt="image-20220817194902212" style="zoom:80%;" />
（3）编译运行过程截图
- <img src="C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20220817194943022.png" alt="image-20220817194943022" style="zoom:80%;" />
- 
- 
## 三、程序运行结果
列出程序的最终运行结果及截图。
## 四、问题总结与体会
? 在本次实验中，我对微信小程序的功能有了更多的人士，微信小程序可以跨平台使用，和微信紧密结合，不仅是一个通信的工具，也是服务的平台，能帮助我们完成很多需求，并且微信用户量非常大且在迅速增长，方便、快捷、接口丰富、开发周期低、成本小。通过本次实验我学会了创建微信小程序的两种方法，实验中用到了代码的封装、变量的定义与使用、函数调用等，学到了很多，也很有兴趣。
