[移动开发]WEB应用开发综合实训day12

本节实训内容为微信小程序入门开发，和html、css、js技术类似，上手很快，而且所见即所得，立马可以看到效果，等周末把微信开发者发布小程序的权限搞定就上线展示。

文章目录

• • 微信小程序
  • • • 工具：微信开发者工具，自行安装
      • 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
      • 小程序注册可以按照步骤完成(需要做实名认证)
      • 注册成功登录之后需要扫码，扫码的微信即为当前小程序的管理员账号
      • 登录成功之后需要完善小程序信息，注意事项：
      • 注册登录成功之后会随机生成一个不重复的AppID
      • 使用微信开发者工具创建小程序
      • 项目目录结构
      • app.json
      • 页面绘制
      • 使用各种组件(不使用网页中的那些标签)
      • 样式
      • 绘制首页
      • • 详细内容参考home页面
      • 绘制首页
      • • 详细内容参考home页面
        • 根据文档自行学习弹性盒布局相关内容

微信小程序

• 工具：微信开发者工具，自行安装

• 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/

• 小程序注册可以按照步骤完成(需要做实名认证)

• 注册成功登录之后需要扫码，扫码的微信即为当前小程序的管理员账号

• 登录成功之后需要完善小程序信息，注意事项：

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V0jcozyQ-1632497204298)(img\1632442669645.png)]

• 注册登录成功之后会随机生成一个不重复的AppID

• 使用微信开发者工具创建小程序

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCwXd6T6-1632497204300)(img\1632443269701.png)]

• 项目目录结构

  pages				存放所有的页面
  	index	
  	logs
  utils
  	util.js			工具文件
  app.js				app开头都是全局配置文件
  app.json
  app.wxss
  

• app.json

  是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

  {
    "pages": [
      "pages/home/home",
      "pages/my/my",
      "pages/test/test"
    ],
    "window": {
      "backgroundTextStyle": "dark",
      "navigationBarBackgroundColor": "#C20C0C",
      "navigationBarTitleText": "音乐小程序",
      "navigationBarTextStyle": "white",
      "enablePullDownRefresh":true,
      "backgroundColor":"#000"
    },
    "tabBar": {
      "selectedColor":"#c20c0c",
      "list": [
        {
          "iconPath":"/img/home.png",
          "selectedIconPath":"/img/home-active.png",
          "pagePath": "pages/home/home",
          "text": "首页"
        },
        {
          "iconPath":"/img/wode.png",
          "selectedIconPath":"/img/wode-active.png",
          "pagePath": "pages/my/my",
          "text": "我的"
        }
      ]
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  }
  

  参考全局配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• 页面绘制

  • 使用各种组件(不使用网页中的那些标签)

  • 样式

    /* 
      px是物理像素，不同的终端大小都是固定的
    在小程序中布局尽量使用rpx:根据屏幕的大小自适应取值 
      iphone5: 1rpx = 0.42px
      iphone6: 1rpx = 0.5px
    */
    

• 绘制首页

  • 详细内容参考home页面

0.42px
iphone6: 1rpx = 0.5px
*/
```

• 绘制首页

  • 详细内容参考home页面

  • 根据文档自行学习弹性盒布局相关内容