一,创建小程序
1,打开微信开发者工具
2,新建项目
3,输入appid
4,小程序底部导航配置, app.json
"tabBar": {
"color": "@tabBarColor",
"selectedColor": "@tabBarSelectedColor",
"borderStyle": "@tabBarBorderStyle",
"backgroundColor": "@tabBarBackgroundColor",
"list": [
{
"pagePath": "page/component/index",
"iconPath": "@iconPathComponent",
"selectedIconPath": "@selectedIconPathComponent",
"text": "组件"
},
{
"pagePath": "page/extend/index",
"iconPath": "@iconPathComponent",
"selectedIconPath": "@selectedIconPathComponent",
"text": "扩展能力"
},
{
"pagePath": "page/API/index",
"iconPath": "@iconPathAPI",
"selectedIconPath": "@selectedIconPathAPI",
"text": "接口"
},
{
"pagePath": "page/cloud/index",
"iconPath": "@iconPathCloud",
"selectedIconPath": "@selectedIconPathCloud",
"text": "云开发"
}
]
},
二,目录文件介绍
一个page目录里的 js,json,wxml,wxss 四个文件相对于一个 vue 组件
1,app.js : 项目的入口文件 创建app对象
// 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
}
})
2 ,*.wxml :相当于 html文件
a,标签
<view> 相对于<div>
b,属性:
bindtap='xxx' : 绑定方法
c,导入文件
<import>
<include>
3,*.js 类似于vue2语法
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
motto: 'Hello World',
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
motto: '你好'
})
}
}
})
a,箭头函数 :this声明时固定
b,结构赋值 :{name,age} = student;
c,Proxy代理对象:(常用于get,set方法拦截)
d,Promise承诺对象:(异步编程方式,网络请求)对象.then(success(),failed())
Promise和Axios_axios promise-CSDN博客
e,页面跳转
1.方法一
<button bind:tap="category_name">跳转页面</button>
category_name:function(event){ //event 传参用
wx.navigateTo({
url: '../category_news/category_naws',
})
}
2.方法二
<navigator url="../category_news/category_naws">
<view>跳转页面</view>
</navigator>
4,.wxss 相对于.css 文件
单位:rpx;px,%..
选择器:
导入:@import './sub.wxss';
5,.JSON页面配置文件
页面引用子组件
json 文件配置
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
wxml 文件
<navigation-bar title="分类" back="{{false}}" color="black" background="#FFF"></navigation-bar>
// 配置引用组件
{
"usingComponents": {}
}
6,指令 wx: 相当于 v-
wx:if :v-if
wx:elif
wx:else
wx:for,wx:for-inex, wx:for-item
三,组件
四,api
五,云数据库 云存储
1,页面wxml
<button bind:tap="insert">插入一条数据</button>
<button bind:tap="search">查询数据</button>
<button bind:tap="searchAll">查询所有数据</button>
<button bind:tap="searchWhere">条件查询</button>
<button bind:tap="update">更新</button>
<button bind:tap="delete">删除数据</button>
<button bind:tap="upload">上传文件</button>
<button bind:tap="download">下载文件</button>
<button bind:tap="deletefile">删除文件</button>
<image src = 'cloud://test-7g5jttig68157a44.7465-test-7g5jttig68157a44-1321176364/img2.png'></image>
2 ,页面js
// pages/database/database.js
Page({
/**
* 页面的初始数据
*/
data: {
students: null,
database: null
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.cloud.init({
env: "test-xxxxxxxxxxxx"
});
let db = wx.cloud.database();
this.data.database = wx.cloud.database();
this.data.students = db.collection("students");
},
// 插入数据
insert: function () {
this.data.students.add({
data: {
age: 20,
name: "小红",
class: 2
},
success: function () {
console.log("插入成功")
},
fail: function () {
console.log("插入失败")
},
complete: function () {
console.log("完成")
},
});
},
search: function () {
// 查询数据
this.data.students.doc("f18e14fa6516a6b9005f7ca27e734c34").get({
success: function (res) {
console.log(res.data);
}
});
},
searchAll: function () {
// 查询数据
this.data.students.get({
success: function (res) {
console.log(res.data);
}
});
},
searchWhere: function () {
// 条件查询
this.data.students.where({
age: this.data.database.command.gte(21),
name: "小红"
}).get({
success: function (res) {
console.log(res.data);
}
});
},
update: function () {
// 局部更新
// this.data.students.doc("f18e14fa6516a6b9005f7ca27e734c34").update({
// data: {
// name: "小明明"
// },
// success: function () {
// console.log("更新成功");
// }
// })
// 全部更新
this.data.students.doc("f18e14fa6516a6b9005f7ca27e734c34").set({
data: {
name: "小明明",
age: 23
},
success: function () {
console.log("更新成功");
}
})
},
delete: function () {
// 删除
this.data.students.doc("def1da456516b37904d1fb1f3fed6e22").remove({
success: function () {
console.log("删除成功");
}
})
},
upload: function () {
//
wx.chooseImage({
success: function (res) {
wx.cloud.uploadFile({
filePath: res.tempFilePaths[0],
cloudPath: 'img3.png',
succes: function (res) {
console.log(res.fileID);
},
fail: function () {
console.log("error");
}
});
},
})
},
download: function () {
//
wx.cloud.downloadFile({
fileID:"cloud://test-xxxxxx-test-7g5jttig68157a44-1321176364/img2.png",
succes: function (res) {
console.log(res.tempFilePath);
},
})
},
deletefile: function () {
//
wx.cloud.deleteFile({
fileList:["cloud://test-xxxxxx-test-7g5jttig68157a44-1321176364/img3.png"],
succes: function () {
console.log('删除成功');
},
})
},
})
六,云函数
1 页面 wxml
<button bind:tap="callFunction">调用云函数</button>
<button bind:tap="getTeachers">获取教师列表</button>
2 页面 js
callFunction:function(){
wx.cloud.callFunction({
name:"hello", // 云函数名
data:{ //传参
name:"小明===",
age:21
},
success:function(res){
console.log(res.result)
}
});
},
getTeachers:function(){
wx.cloud.callFunction({
name:"getTeachers", // 云函数名
data:{ // 传参
page:this.data.page,
pageSize:this.data.pageSize,
},
success:(res)=>{
console.log(res.result.data)
if (res.error){
console.log(res.errMsg)
}
// 分页逻辑
if (res.result.hasMore){
this.data.dataList = this.data.dataList.concat(res.result.data);
this.data.page = this.data.page+1;
this.getTeachers();
}else{
this.data.dataList = this.data.dataList.concat(res.result.data);
console.log(this.data.dataList);
}
},
fail:function(error){
console.log("error:",error)
}
});
},
3 新建 Node.js云函数
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
// 云函数入口函数
exports.main = async (event, context) => {
let db = cloud.database({
env:"test-xxxxxxxxxx" // 云环境id
});
let teachers = db.collection("teachers");
let page = event.page;
let pageSize = event.pageSize;
console.log(page,pageSize); // 打印在云端日志
let count = await teachers.count();
let total = count.total;
let hasMore = page * pageSize < total;
let list = await teachers.limit(pageSize).skip(page*pageSize).get();
return{
data:list.data,
error:list.error,
errorMsg:list.errorMsg,
hasMore:hasMore
}
}
七 部署
1,微信部署
发布:开发者工具上传>小程序管理后台-版本管理>提交审核-审核版本>-上线版本
微信云托管: 微信开放社区
2,阿里云部署
微信小程序-阿里云部署_daizikui的博客-CSDN博客
include和import的区别 作用都是引用公共组件
微信小程序中include和import的区别_小程序include_zhy前端攻城狮的博客-CSDN博客
import是用来导入模板。
include用来导入除模板以外的内容。