uni-app的应用
exprexss+router+mysql+sequelize
一、api的编写
1.npm init -y
2.git init
3.npm i express mysql2 sequelize -S
4.npm i sequelize-cli -S
5.npm i nodemon -S
6.npm i nodemon -D
7.edit package.json
"scripts": {
"start": "nodemon src/app.js"
},
二、ORM模型的创建
1.数据库的创建
2.使用 sequelize-cli 初始化项目的数据库配置信息
.md db
.npx sequelize init
3.修改 db/config.json 数据库配置文件
4.生成模型文件
1>migration文件
2>model文件
npx sequelize model:generate --name xxx --attributes xxx
3>持久化,模型对应的数据库表
npx sequelize db:migrate
5.postman 在body测试
const bodyParser = require("body-parser");
app.use(express.json());
app.use(express.urlencoded());
app.use(bodyParser.urlencoded({extended: true }));
6.运维和发布
1> npm i pm2 -g
2>pm2 init
3>pm2 start ecosystem.js
4.pm2 log
三、css 注意点
1.字体图标的引入
scr:url(~@/)
2.样式布局
例: good_list
.good_list{
padding: 0 15rpx;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
.good_item{
backgroup: #fff;
width:355rpx;
margin:10rpx;
padding:15rpx;
box-sizing:border-box;
image:{
width:80%;
heigth:150px;
display:block;
margin:auto;
.price {
color:;
font-size:36rpx;
text:nth-child(2){
color:;
font-size:28rpx;
margin-left :7rpx;
}
}
}
}
}
四.组件应用注意点
1.子组件:
接收父组件传递过来的参数
<script>
export default{
props:["cgoods"] //接收传递过来的值变量,暴露给父组件使用
}
</script>
2.父组件向子组件传值
父组件:
引入子组件
<script>
import goodsList from ../xxx.vue //引入子组件文件
components:{"goods-list":goodsList:} //注册成组件goods-list来使用
</script>
<view >
<goods-list :cgoods="goods"></goods-list> //父件数据值goods绑定到cgoods给子组件使用
</view>
3.子组件触发父组件的事件
子组件定义一个方法触发父组件的事件
this.$emit.event
父组件event {to do }
五、在微信开发工具运行
第一次运行时,必须要打开微信开发工具设置的安全服务端口。
一、脚手架搭建项目
1.全局安装
npm install -g @vue/cli
2.创建项目
vue create -p dcloudio/uni-preset-vue my-project
3.启动项目(微信小程序)
nmp run dev:mp-weixin
4.微信开发工具导入项目
二、样式和sass
1.支持小程序的rpx=750和h5的vw=100、vh=100
2.内置有sass的配置,安装对应的依赖 npm install sass-loader node-sass
3.vue中,在属性 <style lang='scss'>
三、数据展示
1.在js的data()定义,通过return返回
2.在template 通过{{}}来显示
3.在标签属性上通过:data-index='''数据' 来使用
四、数据循环
<view v-for=(item,index) in list :key=item.id></view>
五、条件编译
<view v-if='true'></view>
<view v-if='isShow'></view>
<view v-show='true'></view>
六、计算属性
1.在js
data(){
return list:[
{id:0,
name:'apple'},
{id:1,
name:'watermenlon'
}
]
},
//数据计算
computed:{
cnMony(){
return 10+10
},
//数据过滤
dataFilter(){
return this.list.filter(v=>v.id<=0)
}
//数据加工
processList(){
return this.list.name(v=>{
v.name='apple';
return v;
})
}
}
七、事件使用
1.注册事件 @click='handleclick'
2.在method里定义事件监听函数
3.传参
例:
<view data-index='aa' @click='handleclick(要传的参数para,$event)'></view>
methord:{
handleclick(接收的参数para,event)
console.log(event.currentTarget.dataset.index) //取得自定义变量data-index的值
}
八、组件的使用
1.组件的定义
2.组件的引入
import from
2.组件的注册
在components:{compname:compvalue}
3.组件的使用
<组件名compname></组件名compname>
九、组件传递参数
1、父向子组件传递参数,通过属性的方式,子组件通过props来接收
2. 子向父组件传递参数,通触发事件的方式
1>子组件通过触发的方式向父组件传递数据
2》父组件通过事件监听方式来接收数据
子向父组件传递参数,通触发事件,this.$emit(自定义事件,要传递的参数)
3.通过全局数据传递参数
1》通过挂载vue的原型
在main.js文件中,Vue.protoType.baseURL="http://www.baidu.com"
使用时,this.baseURL
2》通过globaldata的方式
在app.vue文件中, getApp().globalData.text="test"
使用时, getApp().globalData.text
十、组件的插槽
就是往父组件上放入动态的内容
首先在子组件上的<view> <slot></slot></view>
组件生命周期中使用mounted挂载
十一、uni-ui的使用
1、安装uni- ui
npm install @dcloudio/uni-ui
2、局部引入组件
import from
3、注册组件
components:{}
4、使用组件
<uni-badge></uni-badge>
十二、封装自己的异步请求
1.基于原生的promise来封装
export default(params)=>{
uni.showLoading({
title:"loading"
})
return new Promise((resolve,reject)=>{
wx.request({
...params,
success(res){
resolve(res);
},
fail(err){
reject(err);
},
complete(){
uni.hideLoading();
}
})
})
}
2.挂载到vue的原型上
main.js文件
import request from 'utils/request.js'
Vue.prototype.request = request;
3、通过this.request的方式来使用
onLoad(){
this.request({
url:"http://localhost:3000/"
})
.then(res=>{
console.log(res);
})
}
十三、分页功能的分析
1.使用scroll-view
2.绑定滚动条触底事件scrolltolower
3.实现分页逻辑