认识微信小程序
目录
简介
微信小程序，一款基于微信平台的无需下载安装便可使用的轻量化软件，通过扫码或搜索便可轻松获取所需服务。它的主要特点便是无需下载，即点即用，无须卸载，迅速融入我们的日常生活，改变了诸多商业模式。小程序具备多种实用功能。首先，众多功能涵盖在线购物、餐饮服务、音乐播放等，大大改善了大家的生活便利度；其次，拥有多达52个流量入口，包含线下应用场景的即时服务以及通过会员与粉丝互动的粘性服务。此外，还可以同本地优质公众号合作，通过附近小程序搜索及好友、微信群分享获取有效信息.综上所述，微信小程序作为一种独特的应用程序，其充满活力的社区生态使使用者得以充分运用，诸如浏览、购买、支付、分享等等，操作方式灵活多元，全方位地满足了广大用户对移动应用的所有需求。
优势
- 无需安装
- 触手可及
- 用完即走
- 无需卸载
场景
简单的业务逻辑
简单的业务逻辑体现如下：
-
在线购物：
- 用户浏览商品列表，点击进入商品详情页。
- 用户选择商品的数量、规格等信息，加入购物车或直接购买。
- 用户进行订单结算，选择支付方式并完成支付。
- 用户查看订单状态、物流信息等。
-
餐饮外卖：
- 用户浏览餐厅菜单，选择所需的菜品并加入购物车。
- 用户填写送餐地址、联系方式等信息。
- 用户选择支付方式，完成支付。
- 餐厅接单、准备食物并配送给用户。
- 用户查看订单状态、配送进度等。
-
旅游出行：
- 用户搜索目的地，查看相关景点、酒店等信息。
- 用户选择预定酒店、门票等产品，填写预定信息。
- 用户选择支付方式，完成支付。
- 用户查看预订详情、出行须知等。
-
教育培训：
- 用户浏览课程列表，选择感兴趣的课程。
- 用户填写报名信息，选择支付方式并完成报名费支付。
- 用户收到报名确认通知，获取学习资料和课程安排等。
-
社交娱乐：
- 用户浏览好友列表，查看好友动态。
- 用户发送消息、图片、表情等与好友进行聊天。
- 用户参与社区话题讨论，点赞、评论等互动。
-
健康管理：
- 用户填写个人健康信息、体检结果等。
- 用户查看健康报告、建议和健康计划。
- 用户记录体重、运动、饮食等信息，生成健康数据报告。
低频度的使用场景
低频度的场景体现如下：
1. 银行理财：
1.用户登录银行小程序，查看个人账户余额、理财产品等信息。
2.用户选择购买理财产品，填写相关信息并确认购买。
3. 用户可以定期查看理财产品的收益情况，进行赎回或再投资等操作。
2. 汽车维修：
1.用户在小程序中预约汽车维修服务。
2. 用户填写车辆信息、故障描述等，并选择预约时间和地点。
3. 用户到达维修店进行汽车维修，维修完成后可以支付服务费用。
3. 医疗预约：
1.用户在医院小程序上预约就诊时间。
2.用户选择所需科室、医生和日期，并填写个人信息。
3. 用户到医院就诊，在小程序上扫描二维码进行挂号和支付挂号费用。
4. 法律咨询：
1.用户在法律服务小程序上提出咨询需求。
2. 用户填写咨询问题和个人信息，并选择律师。
3.律师通过小程序回复用户的问题，并提供法律建议。
4. 用户可以付费获取更深入的法律咨询服务。
5. 路况导航：
1. 用户在导航小程序上输入目的地并选择出行方式。
2. 小程序提供实时路况信息，推荐最佳路径。
3. 用户可以收藏常用的目的地和路线规划。
我的第一个微信小程序
代码如下：
index.wxml
<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
<view class="container">
<view class="userinfo">
<block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
</button>
<view class="nickname-wrapper">
<text class="nickname-label">昵称</text>
<input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
</view>
</block>
<block wx:elif="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<view wx:else> 请使用2.10.4及以上版本基础库 </view>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
</scroll-view>
index.wxss
/**index.wxss**/
page {
height: 100vh;
display: flex;
flex-direction: column;
}
.scrollarea {
flex: 1;
overflow-y: hidden;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
width: 80%;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.usermotto {
margin-top: 200px;
}
.avatar-wrapper {
padding: 0;
width: 56px !important;
border-radius: 8px;
margin-top: 40px;
margin-bottom: 40px;
}
.avatar {
display: block;
width: 56px;
height: 56px;
}
.nickname-wrapper {
display: flex;
width: 100%;
padding: 16px;
box-sizing: border-box;
border-top: .5px solid rgba(0, 0, 0, 0.1);
border-bottom: .5px solid rgba(0, 0, 0, 0.1);
color: black;
}
.nickname-label {
width: 105px;
}
.nickname-input {
flex: 1;
}
index.ts
// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Component({
data: {
userInfo: {
avatarUrl: defaultAvatarUrl,
nickName: '',
},
hasUserInfo: false,
canIUseGetUserProfile: wx.canIUse('getUserProfile'),
canIUseNicknameComp: wx.canIUse('input.type.nickname'),
},
methods: {
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
},
onChooseAvatar(e: any) {
const { avatarUrl } = e.detail
const { nickName } = this.data.userInfo
this.setData({
"userInfo.avatarUrl": avatarUrl,
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
},
onInputChange(e: any) {
const nickName = e.detail.value
const { avatarUrl } = this.data.userInfo
this.setData({
"userInfo.nickName": nickName,
hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
})
},
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
},
})
index.json
{
"usingComponents": {
}
}小程序开发者工具界面功能介绍
1.工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。
2.模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
3.目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
5.编辑区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项“：”是定制与控制开发工具按钮
6.调试区
1.Console面板
Console面板是调试小程序的控制面板，当代码执行出现错误时，错误信息将显示在Comsole 面板中，便于开发者排查错误。另外在小程序中，开发者可以通过console. log语句将信息输出到Console面板中。此外，开发者可以在Console面板直接输入代码并调试。
2.Sources面板
Sources面板是源文件调试信息页，用于显示当前项目的脚本文件。调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮。
3.Network面板
Neok面板是网络调试信息页，用于观察和显示网络请求request和socket等网络相关的详细信息，
4.Security面板
Security 面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题。如果设置安全论证，则会显示“The security of this page is unknown.”
5.Storage面板
Storage 面板是数据存储信息页，开发者可以使用 wx setStorage 或者 wx setStorageSync 将数据
存储到本地存储，存储在本地存储中的变量及值可以在 Storage 面板中显示
6AppDate面板
AppData 面板是实时数据信息页。用于显示项目中被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更况反映到前端界面
7.Wxml面板
Wxml面板是布局信息页，主要用于调试Wxml组件和相关CSS样式，显示Wxml转化后的界面。Wxml面板调试区的左侧部分是Wxml代码，右侧部分是该选择器的CSS样式
8.Sensor面板
Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现用于调试重力感应API。
9.Trace面板
Trace面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓 。
10.拓展菜单栏
最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
