uni-app

兼容

mian.js的配置版本选择

// #ifndef VUE3  #vue2版本
// #ifdef VUE3   #vue3版本

//页面兼容H5页&微信小程序页

  H5页     //只会在web页显示
  小程序页    //只会在微信小程序页显示

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   //长安事件

路由跳转

 //没有定义底部菜单(可以正常跳转,定义底部菜单只能在同一个文件下跳转)
发送路由值  
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) } //被跳转页

父子传值

父传子(子页面为代码多了分页或写另一个功能的分页)

//父组件发送

import List from '@/pages/son/son.vue';
export default {components:{List}} //导出供html

//子组件接收
export default {
		props:{msg:String},
		mounted(){console.log(this.msg)}
	}

子传父

	//父组件通过绑定属性传递带参函数过去
	  //属性跟变量取名相同
	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": "商品"
        }]
}

工具下载

Hbuilder
微信开发者工具

插件安装 与 配置

工具>插件安装>安装新插件  内置浏览器 内置终端 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()