1. 下载HBuilder
官网:DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架
2. sass编译插件
下载错误时：可通过改变软件版本
3. 自定义快捷键
4. 新建项目
5. 在微信小程序中安全配置 安全---服务器端口打开
5. 运行 运行---运行到小程序模拟器----微信开发者工具
7. 出现报错 修改详情---本地设置---调试基础库选择合适基础库
8. 新建项目
点击时图标的切换
在pages.json中将index删除在pages文件夹里添加文件home、cate、gouwu、my
在名称中写文件名选择使用sess页面点击创建
在pages.json中写入"tabBar"
"selectedColor":"#333333", 选中时导航文字的颜色
list":[
{
"pagePath":"pages/home/home",文件名的路径
"text":"首页",文件显示的文字
"iconPath":"static/tab_icons/home.png",没有点击时图标图片
"selectedIconPath":"static/tab_icons/home-active.png"点击后的图标图片
},
9. 创建服务器项目
点击文件---新建----项目
10. 创建项目写入名称选择相应的选项选择uni-admin选项还有阿里云选项输入项目名称点击创建。
11. 右击uni-cloud选择云服务空间初始化向导
12.绑定服务空间点击下一步
没有服务空间点击新建选择新建服务空间
配置服务器等待10分钟左右后重启HBuilderX
1. 点击运行---运行到浏览器---chrome
2.右击database选择新建DB Schema
新建自定义文件夹选择默认模板点击确定
1. 进入自定义文件中写入
"classname":{
"title": "名称", 标题
"description": "请输入名称", 提示名称
"bsonType": "string"数据类型
},
"classname":{
"title": "名称",
"description": "请输入名称",
"bsonType": "string"
},
"orderid":{
"title": "排序",
"description": "请输入排序",
"bsonType": "int"
},
"icon":{
"title": "图标",
"bsonType": "file"
},
"state":{
"title": "状态",
"bsonType": "bool",
"defaultValue":"true"
},
"createTime":{
"title": "创建时间",
"bsonType": "timestamp",
"forceDefaultValue":{
"$env": "now"
}
15.选择相应页面导出文件格式。
16.添加新闻
从database中新建一个schema文件选择模板为文章
17. 将模板源文件修改为自己想要的相应代码
{
"bsonType": "object",
"required": [
"title",
"content"
],
"permission": {
"read": true,
"create": "auth.uid != null",
"update": "doc.user_id == auth.uid",
"delete": "doc.user_id == auth.uid"
},
"properties": {
"_id": {
"description": "存储文档 ID（用户 ID），系统自动生成"
},
"title": {
"bsonType": "string",
"title": "标题",
"description": "标题",
"label": "标题",
"trim": "both"
},
"author":{
"bsonType": "string",
"title": "作者",
"description": "请输入作者名称",
"label": "作者",
"trim": "right"
},
"avatar": {
"bsonType": "file",
"title": "封面",
"description": "缩略图地址",
"label": "封面大图",
"trim": "both"
},
"content": {
"bsonType": "string",
"title": "内容",
"description": "文章内容",
"label": "文章内容",
"trim": "right"
},
"view_count": {
"bsonType": "int",
"title": "阅读量",
"description": "阅读数量",
"defaultValue":55
},
"is_essence": {
"bsonType": "bool",
"title": "推荐",
"description": "是否推荐该篇文章"
},
"publish_date": {
"bsonType": "timestamp",
"title": "时间",
"description": "发表时间",
"defaultValue": {
"$env": "now"
}
},
"article_status": {
"bsonType": "int",
"title": "状态",
"description": "文章状态：0 草稿箱 1 已发布",
"defaultValue": 1,
"enum": [
{
"value": 0,
"text": "草稿箱"
},
{
"value": 1,
"text": "已发布"
}
]
},
"publish_ip": {
"bsonType": "string",
"title": "发布文章时IP地址",
"description": "发表时 IP 地址"
}
},
"version": "0.0.1"
}
在添加（add.Vue)中修改内容标签引入wangeditor
在内容中添加 <div id="div1"></div>一个id 为div1的id
在添加以下代码
import E from "wangeditor"\\添加wangeditor
let editor=null
onWangEdit(){
editor=new E('#div1')
editor.config.zIndex=500//层级默认为10000，需要修改为500（设置高度）
editor.config.onblur=(newHtml)=>{
console.log('onblur',newHtml)//获取最新的html内容
this.formData.content=newHtml
}
editor.config.customUploadImg = function(resultFiles, insertImgFn) {
resultFiles.forEach(item => {
let path = URL.createObjectURL(item);//createObjectURL的作用是将路径换成blob的形式
let name = item.name
uniCloud.uploadFile({
filePath: path,
cloudPath: name,
}).then(res => {
console.log(res)
insertImgFn(res.fileID)
})
})
}
editor.create()
}
17. 写公共函数
在cloudfunctions中的common文件夹下面右键--新建公共模块，应在页面中的common文件夹中新建
写入代码（
function giveMsg(str){
let msgObj={
"success":"查询成功~",
"noSuccess":"查询失败",
"add":'新增成功',
"noAdd":"新增失败",
"required":"缺少参数"
}
return msgObj[str]
}
function giveCode(num){
let codeObj={
0:0, //成功的代码
400:400 //调用失败的代码
}
return codeObj[num]
}
function result(errCode,errMsg,data,total){
return {
errCode:giveCode(errCode),
errMsg: giveMsg(errMsg),
data,
total
}
}
module.exports = {
giveMsg,
giveCode,
result
}
19.新建公共模块
建立新的云对象输入文件名点击创建
17. 在cloudfunctions上右键新建云函数/云对象
