当前位置:   article > 正文

第一章 微信小程序概述总结_微信小程序使用介绍

微信小程序使用介绍

目录

学习目标

如何认识小程序?

1.1  小程序简介

1.2小程序的特征

1.3 小程序应用场景的特点

1.4 微信小程序开发流程

1.5 下载微信小程序开发中工具APP

微信开发者功能介绍

(1)工具栏

(2)模拟区

(3)目录文件区

(4)编辑区

                                           表1-1  微信小程序开发工具常用组合键

(5)调试区

调试区功能介绍


学习目标

了解小程序的特点

了解微信小程序的应用领域

掌握微信小程序开发工具的安装及使用

掌握微信小程序的开发流程

熟练使用微信小程序开发者工具

如何认识小程序

1.1  小程序简介

微信(WeChat)小程序是腾讯公司于2011年1月21日退出的一款智能终端提供即时通信(Instant Messaging,IM)服务的应用程序,小程序是一种不需要下载安装级可使用的应用。

1.2小程序的特征

(1)无需安装

(2)触手可及

(3)用完即走

(4)无需加载

1.3 小程序应用场景的特点

(1)简单的业务逻辑

简单是指应用本身的业务逻辑。例如:"小黄车"

(2)低频度的使用场景

低频度是小程序使用场景的另一个特点。例如:"猫眼"

1.4 微信小程序开发流程

第一步:在微信公众号平台上注册小程序账号

第二步:下载开发者工具进行编码

第三步:通过开发者工具提交代码,通过审核后便可发布

1.5 下载微信小程序开发中工具APP

 学习这本课程中,首先,需要安装一个软件APP,之后注册一个微信小程序账号

微信开发者功能介绍

微信小程序界面划分于5大区域:工具栏、模拟区、目录文件区、编辑区和调试区。

(1)工具栏

实现多种功能,例如账号切换,小程序编译、清理存缓、预览等

(2)模拟区

在模拟区中选择手机类型、显示比例、网络类型,模拟器会显示运行效果

(3)目录文件区

用来显示当前的目录结构

(4)编辑区

用来实现对代码的编辑操作,编辑区中支持对.wxml、.wxss、.js.json文件的操作

编辑区常用的组合键:

                                           表1-1  微信小程序开发工具常用组合键
组合键功能组合键功能
Ctrl+S保存文件Ctrl+Home移动到文件开头
Ctrl+【,Ctrl+】代码行缩进Ctrl+End移动到文件结尾
Ctrl+Shift+【,Ctrl+Shift+】折叠打开代码块Shift+Home选择从行首到光标处
Ctrl+Shift+Enter在当前上方插入一行Shift+End选择从光标到行尾
Ctrl+Shift+F全局搜索Ctrl+I选中当前行
Ctrl+Alt+F行码格式化Ctrl+D选中匹配
Alt+Up,Alt+Down上下移动一行Ctrl+Shift+L选择所有匹配
Shift+Alt+Up(Down)向上(向下)复制一行Ctrl+U光标退回
(5)调试区

调试区的功能是帮助开发者进行代码调试及排查有问题的区域,小程序系统为开发者提供了9个调试功能模块,分别是Console、Sources、Nekwork、Security、Storage、AppData、Wxml、SensorTrace。最右边的扩展菜单项:是控制开发工具按钮。

调试区功能介绍

(1)Console面板

Console面板是控制台,是调试小程序的控制面板,当代码执行错误时,错误信息将显示在控制Console面板中,便于开发者排查错误。

(2)Sources面板

Sources面板是源码,用于显示当前项目的脚本文件,例如:微信开放文档

(3)Network面板

Network面板是请求网络调试信息页,用于显示当前项目的脚本文件

(4)Security面板

Security面板是安全人证信息页,开发者可以通过该面板调试当前的网页的安全和认证等问题。如果安全设置安全论证,则会显示“The security of this page is unknown.”

(5)Storage面板

Storage面板是数据库存储信息页

(6)AppData面板

AppData面板是实时数据信息页,用于显示被激活的所有页面的数据情况

(7)Wxml面板

Wxml面板是布局信息页,主要用于调试Wxml组件和相关CSS样式,显示Wxml转化后的界面。

(8)Sensor面板

Sensor面板是重力传感器信息页,用于调试重力感应API

(9)Trace面板

Trace面板是路由跟踪信息页,开发者在这里可以追踪连接到电脑中的安装的路由信息

我的第一个微信小程序代码如下所示:

.wxml代码:

  1. <!--index.wxml-->
  2. <navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
  3. <scroll-view class="scrollarea" scroll-y type="list">
  4. <view class="container">
  5. <view class="userinfo">
  6. <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
  7. <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  8. <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
  9. </button>
  10. <view class="nickname-wrapper">
  11. <text class="nickname-label">昵称</text>
  12. <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
  13. </view>
  14. </block>
  15. <block wx:elif="{{!hasUserInfo}}">
  16. <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
  17. <view wx:else> 请使用2.10.4及以上版本基础库 </view>
  18. </block>
  19. <block wx:else>
  20. <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
  21. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  22. </block>
  23. </view>
  24. <view class="usermotto">
  25. <text class="user-motto">{{motto}}</text>
  26. </view>
  27. </view>
  28. </scroll-view>

.scss代码:

  1. /**index.scss**/
  2. page {
  3. height: 100vh;
  4. display: flex;
  5. flex-direction: column;
  6. }
  7. .scrollarea {
  8. flex: 1;
  9. overflow-y: hidden;
  10. }
  11. .userinfo {
  12. display: flex;
  13. flex-direction: column;
  14. align-items: center;
  15. color: #aaa;
  16. width: 80%;
  17. }
  18. .userinfo-avatar {
  19. overflow: hidden;
  20. width: 128rpx;
  21. height: 128rpx;
  22. margin: 20rpx;
  23. border-radius: 50%;
  24. }
  25. .usermotto {
  26. margin-top: 200px;
  27. }
  28. .avatar-wrapper {
  29. padding: 0;
  30. width: 56px !important;
  31. border-radius: 8px;
  32. margin-top: 40px;
  33. margin-bottom: 40px;
  34. }
  35. .avatar {
  36. display: block;
  37. width: 56px;
  38. height: 56px;
  39. }
  40. .nickname-wrapper {
  41. display: flex;
  42. width: 100%;
  43. padding: 16px;
  44. box-sizing: border-box;
  45. border-top: .5px solid rgba(0, 0, 0, 0.1);
  46. border-bottom: .5px solid rgba(0, 0, 0, 0.1);
  47. color: black;
  48. }
  49. .nickname-label {
  50. width: 105px;
  51. }
  52. .nickname-input {
  53. flex: 1;
  54. }

.json代码:

  1. {
  2. "usingComponents": {
  3. "navigation-bar": "/components/navigation-bar/navigation-bar"
  4. }
  5. }

.ts代码:

  1. // index.ts
  2. // 获取应用实例
  3. const app = getApp<IAppOption>()
  4. const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
  5. Component({
  6. data: {
  7. motto: 'Hello World',
  8. userInfo: {
  9. avatarUrl: defaultAvatarUrl,
  10. nickName: '',
  11. },
  12. hasUserInfo: false,
  13. canIUseGetUserProfile: wx.canIUse('getUserProfile'),
  14. canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  15. },
  16. methods: {
  17. // 事件处理函数
  18. bindViewTap() {
  19. wx.navigateTo({
  20. url: '../logs/logs',
  21. })
  22. },
  23. onChooseAvatar(e: any) {
  24. const { avatarUrl } = e.detail
  25. const { nickName } = this.data.userInfo
  26. this.setData({
  27. "userInfo.avatarUrl": avatarUrl,
  28. hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
  29. })
  30. },
  31. onInputChange(e: any) {
  32. const nickName = e.detail.value
  33. const { avatarUrl } = this.data.userInfo
  34. this.setData({
  35. "userInfo.nickName": nickName,
  36. hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
  37. })
  38. },
  39. getUserProfile() {
  40. // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
  41. wx.getUserProfile({
  42. desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
  43. success: (res) => {
  44. console.log(res)
  45. this.setData({
  46. userInfo: res.userInfo,
  47. hasUserInfo: true
  48. })
  49. }
  50. })
  51. },
  52. },
  53. })

最后呈现的效果图为:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/837378
推荐阅读
相关标签
  

闽ICP备14008679号