uniapp manifest 设置包名 uniapp常用命令

PS：最近入坑uniapp，作者觉得常用的从官网或者自己总结下来的，相当于笔记吧。

目录

1、对话框(uni.showModal) 

2、发送请求(uni.request)

3、路由跳转

        3-1 标签跳转

        3-2 js

4、本地存储

5、图片

        5-1 mode属性

                 5-2 图片放大(uni.previewImage)

6、微信登录

7、生命周期

        7-1 应用生命周期

        7-2 页面生命周期

        7-3 组件生命周期

---

---

1、对话框(uni.showModal) 

uni.showModal({
    title:"提示",
    content:"",
    showCancel:true,
    cancelText:'取消按钮',
    confirmText:'确定按钮',
    success:(res)=>{
        console.log(res) 
        if(res.confirm){
            // 用户点击确定回调                                                    
        }else{
            // 否则点击了取消回调
        }
    }
})

2、发送请求(uni.request)

uni.request({
					url: "", //接口
					method: "POST", //方法
					dataType:'json',//数据类型
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}, //解决跨域
					data: {
						text: this.title
					},  //传递的数据
					success: (res) => {
						console.log(res)
					}, //成功回调，返回的数据和ajax不太一样，在res.data里，自行打印res便知
                    fail: (err) => {
					     console.log(err)
					} //失败回调

				})

3、路由跳转

        uniapp页面跳转分的比较细，我分了两种方式一种以标签，一种是js里面

        3-1 标签跳转

<view class="btn-area">
    <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
        <button type="default">跳转到新页面</button>
    </navigator>
    <navigator url="redirect/redirect?title=redirect" open-type="redirect">
        <button type="default">在当前页打开</button>
    </navigator>
    <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab">
        <button type="default">跳转tab页面</button>
    </navigator>
</view>

        3-2 js

uni.navigateTo({  //保留当前页面
    url: ''
});

uni.redirectTo({ //关闭当前页面，跳转到应用内的某个页面。
    url: ''
});

uni.reLaunch({ //关闭所有页面，打开到应用内的某个页面
    url: ''
});

uni.switchTab({ //跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
    url: '/pages/index/index'
});

uni.navigateBack({ //关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
    delta: 2
});

PS：具体参考uni-app官网

4、本地存储

        本地存储分两种，同步和异步

//异步

//设置
uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});
//获取
uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});
//删除1
uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});
//删除2
uni.clearStorage();


//同步

//设置
uni.setStorageSync('storage_key', 'hello');
//获取
 const value = uni.getStorageSync('storage_key');
//删除1
uni.removeStorageSync('storage_key');
//删除2
 uni.clearStorageSync();

5、图片

        5-1 mode属性

        uniapp图片有自己的裁剪、缩放的模式，主要说的是mode属性，具体的看官网uni-app官网

        5-2 图片放大(uni.previewImage)

6、微信登录

//微信 获取用户信息
uni.getUserProfile({
    desc: "ceshi",
	success: (res)=> {
		console.log(res)
	},
	fail: function(res) {
		console.log(res)
	}
})

//微信 手机号
getPhone: function(e) {
	wx.checkSession({
		success: function() {
			console.log(e)
			his.loading = false;
		}
	})
},


//微信  code
uni.login({
	provider: 'weixin',
	success: function (res) {
		console.log(res);
	}
});

7、生命周期

        7-1 应用生命周期

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('App Launch')  //只执行一次
        },
        onShow: function() {
            console.log('App Show') //进入前台的函数
        },
        onHide: function() {
            console.log('App Hide') //从前台进入后台
        }
    }
</script>

        7-2 页面生命周期

                主要的是onLoad函数，监听页面加载，其他的见官网uni-app官网

        7-3 组件生命周期

                vue的钩子函数那些，created、mounted等等