兼容
mian.js的配置版本选择
// #ifndef VUE3 #vue2版本
// #ifdef VUE3 #vue3版本
//页面兼容H5页&微信小程序页
<!-- #ifdef H5 --> <text>H5页</text> <!-- #endif --> //只会在web页显示
<!-- #ifdef MP-WEIXIN --> <text>小程序页</text> <!-- #endif --> //只会在微信小程序页显示
js兼容 只会在H5页面或微信页面执行
onLoad(){
// #ifdef H5
// #endif
// #ifdef MP-WEIXIN
uni.login({ //因做了兼容在微信端奏效 也可以该为wx
success(e){console.log(e);}
})
// #endif
}
数据请求
uni.request({
url:'http://api_devs.wanxikeji.cn/api/admin/login',
method:'post',
data:{name:'a',pw:'a'},
success(e){console.log(e)}
})
缓存
uni.setStorageSync('name','淼森润林') //设置缓存
uni.getStorageSync('name') //获取缓存
uni.removeStorageSync('name') //移除某个缓存
uni.clearStorage() //清空缓存
路由配置
"pages": [ //路由 默认第一个为首页
{
"path": "pages/index/index",
"style": {
// "navigationBarTitleText": "首页" //默认导航栏
"navigationStyle": "custom" //导航栏样式自定义
}
}
]
事件绑定
@click.native //点击事件
@longpress.native //长安事件
路由跳转
//没有定义底部菜单(可以正常跳转,定义底部菜单只能在同一个文件下跳转)
<navigator url="/pages/transmit/shouvalue?name=淼森润林"><button>发送路由值</button></navigator>
uni.navigateTo({ //跳转
url:'pages/updata/updata'
})
//定义底部菜单(不能携带参数跳转)
uni.switchTab({
url:'/pages/shopping/shopping'
})
路由传参
uni.navigateTo({url:'/pages/son/son?name="淼森润林" '}) //跳转页
onLoad(e){ console.log("这里:",e.name) } //被跳转页
父子传值
父传子(子页面为代码多了分页或写另一个功能的分页)
//父组件发送
<List msg='大熊猫' ></List>
import List from '@/pages/son/son.vue';
export default {components:{List}} //导出供html
//子组件接收
export default {
props:{msg:String},
mounted(){console.log(this.msg)}
}
子传父
//父组件通过绑定属性传递带参函数过去
<List :fnres='fnres' ></List> //属性跟变量取名相同
import List from '@/pages/son/son.vue';
export default {
components:{List},
methods:{ fnres(v){console.log(v);} }
}
//子组件接受函数 调用带参 完成传参
export default {
props:{fnres:Function},
mounted(){ this.fnres("淼森润林") }
}
vuex
js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { str:"淼森润林" },
mutations: { tong(state,v){state.str=v} },
})
配置 引入挂在
import store from '@/vuex/vuex.js';
const app = new Vue({
...App,store
})
页面js使用
this.$store.commit('tong',"吕布")
底部导航栏配置
"tabBar": { //底部导航栏配置
"color": "#7A7E83",
"selectedColor": "#3cc51f", //选中时的颜色
"borderStyle": "black", //上边框的颜色
"backgroundColor": "#ffffff",
"list": [
{
"pagePath":"pages/index/index", //首页路由
"iconPath":"static/image/footer/shou.png", //图标配置
"selectedIconPath":"static/image/footer/shouv.png", //选中时的图标
"text": "首页"
},
{
"pagePath":"pages/commodity/commodity", //商品路由
"iconPath":"static/image/footer/gou.png", //图标配置
"selectedIconPath":"static/image/footer/gouv.png", //选中时的图标
"text": "商品"
}]
}
工具下载
插件安装 与 配置
工具>插件安装>安装新插件 内置浏览器 内置终端 sass编译
//如微信开发配置
1开发工具配置 工具>设置>运行配置➡将开发者工具安装地址配置上,完成路径配置
2.在manifest.json>微信小程序配置 配置上appid
3.在开发者工具创建项目那>设置>安全 开启服务端口,即可运行微信开发者工具
留言
开发app&小程序 多想一下还有文档教程 讲得很清楚
uniapp同时可开发十几个小程序 其间存在很多为解决的坑
页面布局多选用flex
元素选择多选用类选择器
UniCloud
使用说明
使用时在云端创建创建服务空间>在云对象里创建云数据库 只有将增删查改设置为true才能进行更改
软件里 uniCloud关联云对象 databass文件里可以下载或更改上传...
数据获取
const db = uniCloud.database();
db.collection('sql01').get().then(v=>console.log(v))
增加数据
//添加数据 需要在云裤对字段进行配置
"properties": {
"_id": {
"description": "ID,系统自动生成"
},
"hero":{}, //要添加的字段
"sill":{},
"position":{}
}
//数据添加
const db = uniCloud.database();
db.collection('sql01').add({hero:"哪吒",sill:"三味真火",position:"对抗路"}).then()
删除数据
const db = uniCloud.database();
db.collection('sql01').where({_id:"62d4cdb69d2070000172d5ba"}).remove().then()
更新数据
const db = uniCloud.database();
db.collection('sql01').doc("62d4befe2f77c400013f22cd").update({hero:"李白",sill:"醉酒",position:"打野"}).then()