前几天学习了react开发框架,学习了js语言的基础知识。想到这三年来如火如荼的小程序开发,我决定入坑学习。
微信小程序介绍
微信小程序是以微信为操作环境的应用,本质是Hybrid技术的应用。 H5 类似,但比 H5 有很多原生能力,比如调用位置信息和摄像头。小程序的开发方式与H5非常相似,也使用了JavaScript、HTML、CSS等语言。
微信小程序开发入门1.申请小程序账号
申请小程序账号需要一个没有申请过公众号或者小程序账号的邮箱,然后点击小程序介绍页面底部的“去注册”按钮,进入注册页面按照指引填写信息。
填写信息,点击“注册”,系统会提示你用注册的邮箱激活账户,直接到邮箱激活即可。
2. 安装开发者工具
微信开发者工具可以帮助开发者简单高效地开发和调试微信小程序。程序调试有两种开发模式。可以实时查看页面和功能效果,也可以在开发者工具中调试。它是用 NW.js(以前称为 node-webkit)编写的,在调试时与 Chrome 几乎没有区别,很容易上手。
进入开发者工具下载页面小程序开发 小程序定制 ,根据你的操作系统下载对应的安装包进行安装。
打开微信开发者工具,使用微信扫码登录开发者工具,确认后进入选择“小程序项目”或“公众号网友项目”的界面,这里我们选择“小程序项目”,出现如下界面:
点击新建,会出现示例项目的预览,点击顶部菜单“编译”即可在微信开发者工具的第一个小程序中预览。
3.代码构成
我们生成的项目目录如下:
├── pages 页面目录
| ├── index 首页
| | ├── index.js 首页js
| | ├── index.wxss 首页样式文件
| | └── index.wxml 首页模板文件
├── utils 工具函数
| ├── utils.js
├── app.js app入口文件
├── app.json app配置文件
├── app.wxss app样式文件
└── project.config.json 项目配置文件
如上述目录,小程序必须有app.js入口文件和app.json配置文件。另外还有一个名为project.config.json的工具配置文件,方便开发者工具在不同电脑上开发时进行相同的设置。
每个页面也有四个文件: page.json , page.js , page.wxml , page.wxss 。它们是页面配置、页面逻辑、页面模板和页面样式文件。除了页面配置文件page.json之外,后三个和我们的HTML、JavaScript、CSS三剑客非常相似,只是后缀不同。
WXML模板文件提供数据绑定、列表渲染、条件渲染、模板、事件、引用等功能。
WXSS 样式文件与 CSS 没有什么不同,可以支持大多数 CSS 和 CSS3 语法。此外,它还支持风格介绍和单位转换功能。小程序在WXSS上做了一些扩展和修改,增加了rpx大小单位,所以不需要手动使用类似rem的适配方案,适配移动端的各种机型 小程序分销系统定制 ,为开发者提供方便。
4.代码分析
1.app.json
该文件是当前小程序的全局配置小程序开发,包括小程序所有页面路径、界面性能、网络超时、底部Tab等。
{
"pages": [
"pages/index/index",
"pages/userConsole/userConsole",
"pages/storageConsole/storageConsole",
"pages/databaseGuide/databaseGuide",
"pages/addFunction/addFunction",
"pages/deployFunctions/deployFunctions",
"pages/chooseLib/chooseLib",
"pages/openapi/openapi",
"pages/openapi/serverapi/serverapi",
"pages/openapi/callback/callback",
"pages/openapi/cloudid/cloudid",
"pages/im/im",
"pages/im/room/room"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"style": "v2"
}
所有页面都需要在app.json的pages中添加一个entry,这样才能加载页面
2. index.js
//index.js
const app = getApp()
Page({
data: {
avatarUrl: './user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: ''
},
onLoad: function() {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
this.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
onGetUserInfo: function(e) {
if (!this.data.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
onGetOpenid: function() {
// 调用云函数
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
// 上传图片
doUpload: function () {
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
})
const filePath = res.tempFilePaths[0]
// 上传图片
const cloudPath = 'my-image' + filePath.match(/.[^.]+?$/)[0]
wx.cloud.uploadFile({
cloudPath,
filePath,
success: res => {
console.log('[上传文件] 成功:', res)
app.globalData.fileID = res.fileID
app.globalData.cloudPath = cloudPath
app.globalData.imagePath = filePath
wx.navigateTo({
url: '../storageConsole/storageConsole'
})
},
fail: e => {
console.error('[上传文件] 失败:', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
},
complete: () => {
wx.hideLoading()
}
})
},
fail: e => {
console.error(e)
}
})
},
})
可以看到页面中有一个Page包裹了一个对象。页面的数据,一些生命周期,一些方法都挂载在这个对象上。小程序就是这样初始化的。也就是说,我们在初始化的时候,需要在这个文件中写入初始状态。
3.index.wxml
上传图片
前端操作数据库
即时通信 Demo
快速新建云函数
云调用
作为一名出身于移动开发的工程师,这点非常熟悉。本质是页面的布局渲染。在WXML模板中,渲染了index.js中定义的一些页面变量小程序开发,绑定了多个事件。
4. index.wxss
这是微信独有的一个文件,我个人理解为style,它规定了一些空间的大小、颜色、风格等标准。值得一提的是,微信小程序封装了一个新的单元rpx!该单元可以适应自动适应多种型号。作为一个移动端开发者,我已经被模型的适配无语了。我给满分!
/**index.wxss**/
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.userinfo, .uploader, .tunnel {
margin-top: 40rpx;
height: 140rpx;
width: 100%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-left: none;
border-right: none;
display: flex;
flex-direction: row;
align-items: center;
transition: all 300ms ease;
}
.userinfo {
padding-left: 120rpx;
}
.userinfo-avatar {
width: 100rpx;
height: 100rpx;
margin: 20rpx;
border-radius: 50%;
background-size: cover;
background-color: white;
}
.userinfo-avatar[size] {
width: 100rpx;
}
.userinfo-avatar:after {
border: none;
}
.userinfo-nickname {
font-size: 32rpx;
color: #007aff;
background-color: white;
background-size: cover;
text-align: left;
padding-left: 0;
margin-left: 10px;
}
.userinfo-nickname::after {
border: none;
}
.userinfo-nickname-wrapper {
flex: 1;
}
.uploader, .tunnel {
height: auto;
padding: 0 0 0 40rpx;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.uploader-text, .tunnel-text {
width: 100%;
line-height: 52px;
font-size: 34rpx;
color: #007aff;
}
.uploader-container {
width: 100%;
height: 400rpx;
padding: 20rpx 20rpx 20rpx 0;
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.uploader-image {
width: 100%;
height: 360rpx;
}
.tunnel {
padding: 0 0 0 40rpx;
}
.tunnel-text {
position: relative;
color: #222;
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.tunnel-text:first-child {
border-top: none;
}
.tunnel-switch {
position: absolute;
right: 20rpx;
top: -2rpx;
}
.disable {
color: #888;
}
.service {
position: fixed;
right: 40rpx;
bottom: 40rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: linear-gradient(#007aff, #0063ce);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
display: flex;
align-content: center;
justify-content: center;
transition: all 300ms ease;
}
.service-button {
position: absolute;
top: 40rpx;
}
.service:active {
box-shadow: none;
}
.request-text {
padding: 20rpx 0;
font-size: 24rpx;
line-height: 36rpx;
word-break: break-all;
}
我的第一个小程序演示
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网