资源
视频
https://www.imooc.com/learn/1121
账号注册
https://mp.weixin.qq.com/wxopen/waregister?action=step1
开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/
1、项目文件
- json 配置
- wxml 模板
- wxss 样式
- js 脚本逻辑
2、json 配置
project.config.json 项目配置
app.json 全局配置
page.json 页面配置
3、wxml 模板
标签：view
数据绑定：
动态数据 page.data
Mustache 语法
变量：{ {key}}
循环：wx:for
条件：wx:if
eg:
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { name: "Tom", arr: ["cat", "dog"], isLogin: true, }, });
<!--pages/index/index.wxml-->
<!-- 变量 -->
<view>{ {name}}</view>
<!-- 列表 -->
<view wx:for="{ {arr}}" wx:key="{ {index}}">
{ {index}} { {item}}
</view>
<!-- 条件 -->
<view wx:if="{ {isLogin}}">已登录</view>
<view wx:else>请登录</view>
4、wxss 样式
responsive pixel 宽度以 750rpx 为标准， 以 iphone6 屏幕为测试标准
/ pages/index/index.wxss /
@import "../../style/guide.wxss";
.box {
width: 200rpx;
height: 200rpx;
background-color: #eeeeee;
}
第三方样式库
- weui
- iview weapp
- vant weapp
5、js 脚本逻辑
<!--pages/index/index.wxml-->
<view>{ {count}}</view>
<button bindtap="handleButtonTap" data-id="666" size="mini">点击</button>
// pages/index/index.js
Page({
handleButtonTap: function (event) {
console.log(event);
// 更新数据
this.setData({
count: this.data.count + 1,
});
},
});
云开发
- 云函数
- 获取 appid
- 获取 openid
- 生成分享图
- 调用腾讯云 SDK
- 云数据库
- 数据增删改查
- 云存储
- 管理文件
- 上传文件
- 下载文件
- 分享文件
Serverless
云数据库
MongoBD
权限管理
示例：
// /pages/about/about.js
// 初始化云数据库
const db = wx.cloud.database();
// 添加数据
handleInsert: function(){
db.collection('data').add({
data: {
name: 'Tom'
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
// 更新数据
handleUpdate: function () {
db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').update({
data: {
age: 20
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
// 查找数据
handleFind: function () {
db.collection('data').where({
name: 'Tom'
}).get().then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
// 移除数据
handleRemove: function () {
db.collection('data').doc('a9bfcffc5eb78e810058cf6f4b4a03c5').remove().then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
云函数
开发环境需要安装Node.js
node -v
v10.16.0
如果提示没有安装
npm install --save wx-server-sdk@latest
云函数求和
// cloudfunctions/sum/index.js
// 云函数 求和
exports.main = async (event, context) => {
return event.a + event.b;
}
// /pages/about/about.js
handleCallFunc: function() {
wx.cloud.callFunction({
name: 'sum',
data: {
a: 2,
b: 3
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
获取openid
// /pages/about/about.js
handleLoing: function(){
wx.cloud.callFunction({
name: 'login'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
批量删除
// cloudfunctions/batchDelete/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
return await db.collection('data').where({
name: 'Tom'
}).remove()
}
// /pages/about/about.js
handleBatchDelete: function () {
wx.cloud.callFunction({
name: 'batchDelete'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
云存储
图片上传
handleUploadFile: function(){
// 选择图片
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
// 上传图片
wx.cloud.uploadFile({
// 上传至云端的路径
cloudPath: new Date().getTime() + '.png',
filePath: tempFilePaths[0], // 小程序临时文件路径
success: res => {
// 返回文件 ID
const fileID = res.fileID
// 存储文件路径
db.collection('files').add({
data:{
fileID: fileID
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
fail: console.error
})
}
})
}
图片显示和下载
<block wx:for="{ {images}}" wx:key="index">
<image src="{ {item.fileID}}"></image>
<view>
<button data-fileid="{ {item.fileID}}" bindtap="handleDownloadFile">下载图片</button>
</view>
</block>
// pages/about/about.js
// 初始化云数据库
const db = wx.cloud.database();
Page({
data: {
images: []
},
getFileList: function() {
// 获取图片列表
wx.cloud.callFunction({
name: 'login',
}).then(res => {
db.collection('files').where({
_openid: res.result.openid
}).get().then(res => {
console.log(res)
this.setData({
images: res.data
})
})
})
},
handleDownloadFile: function(event) {
// 下载文件
console.log(event.target.dataset.fileid)
wx.cloud.downloadFile({
fileID: event.target.dataset.fileid, // 文件 ID
success: res => {
// 返回临时文件路径
console.log(res.tempFilePath)
// 保存图片到相册
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
})
}
})
},
fail: console.error
})
}
})
电影评分示例
引入Vant Weapp
参考 https://youzan.github.io/vant-weapp/#/quickstart
在 miniprogram 目录下
npm i @vant/weapp -S --production
工具设置
工具 -> 构建 npm
详情 -> 勾选 使用 npm 模块
发送请求
小程序端 需要icp备案
云函数 无需备案
request库
豆瓣电影
电影列表API：
http://api.douban.com/v2/movie/in_theaters?apikey=;0df993c66c0c636e29ecbb5344252a4a&start=0&count=10`
代码地址：
https://github.com/mouday/weixin-app-demo
</div>
