认识微信小程序
简介:微信小程序是一种集成在微信内部的应用程序,用户可以直接在微信中使用,不需要下载安装。随着微信用户的不断增加,微信小程序逐渐成为商家们进行移动互联网营销的重要选择。小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
特征·:
1. 无须安装
小程序内嵌于微信程序之中,用户在使用过程中无须在应用商店下载安装外部应用。
2. 触手可及
用户通过扫描二维码等形式直接进入小程序,实现见线下场景与线上应用的即时联通。
3. 用完即走
用户在线下场景中,当有相关需求时,可以直接接妾入小程序,使用服务功能后便可以对其不理会,实现用完即走。
4. 无须卸载
用户在访问小程序后可以直接关闭小程序,无须卸载。
应用场景特点:
1.简单的业务逻辑
2.低频的使用场景
我的第一个微信小程序
project.config.json
{
"compileType": "miniprogram",
"libVersion": "trial",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"coverView": true,
"es6": true,
"postcss": true,
"minified": true,
"enhance": true,
"showShadowRootInWxmlPanel": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"condition": {},
"editorSetting": {
"tabIndent": "auto",
"tabSize": 2
},
"appid": "wxa699087b2106ca1f"
}
app.js
// app.js
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
globalData: {
userInfo: null
}
})
app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "Weixin",
"navigationBarBackgroundColor": "#ffffff"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}
app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
运行结果
微信小程序开发者工具界面功能介绍
1.工具栏
在工具栏中可以实现多种功能,例如账号的切换,模拟区、编辑区、调试区的显示/隐藏,小程序的编译、预览,切换后台,清理缓存等。
2. 模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后,模拟器中会显示小程序的运行效果。
3.目录文件区
目录文件区用来显示当前项目的目录结构,单击左上角的“+”按钮可以进行目录和文件的创建,右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
4.编辑区
编辑区用来实现对代码的编辑操作,编辑区中支持对.wxml、.wxss、.js 及.json 文件作,使用组合键能提高代码的编辑效率。
5.调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。
面板
1:Console 面板
Console面板是调试小程序的控制面板,当代码执行出现错误时,错送1信号将显示在
Console面板中,便于开发者排查错误。
2:Sources 面板
Sources 面板是源文件调试信息页,用于显示当调试区左侧显示的是源文件的目录结构。
3:Network面板
Network 面板是网络调试信息页,用于观察和显示网络请求reauest和 socket等网络相关
的详细信息。
4:Security面板
Security 面板是安全认证信息页,开发者可以通过该面板调试当前网页的安全和认证等问
题。
5:Storage 面板
Storage 面板是数据存储信息页,开发者可以使用Wx.setStorage或者Wx.setStorageSync将数据
存储到本地存储,存储在本地存储中的变心可以在Storage面板中显示。
6:AppData面板
AppData面板是实时数据信息页,用于显示项目中被激活的所有页面的数据情况。
7:Wxml面板
Wxml面板是布局信息页,主要用于调试Wxml 组件和相关CSS样式,显示Wxml转的界面。
8:Sensor面板
Sensor面板是重力传感器信息页,开发者可以在这里选择模拟地理位置来模拟杉动设备
用于调试重力感应API。
9:Trace 面板
Trace 面板是路由追踪信息页,开发者在这里可以追踪连接到电脑中的安卓(Android) 设备的路由信息。
10:最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置,开发者可以在这里设置相关信息。