uniapp开发小程序常见问题

一、请仔细浏览uniapp官网，下载HBuilderX创建uni-app亲身体验一下，这里就不多做介绍了。

https://uniapp.dcloud.io/

二、在开发小程序过程中遇到的问题和常用的方法

1、封装ajax请求，请前往我的另一篇博客查看
https://blog.csdn.net/qq_41149508/article/details/105945487

2、用户授权登录

onShow(){
   //判断用户是否授权
   uni.getSetting({
	success(res) {
		// 判断scope后对应的scope.userInfo是否授权
		if (res.authSetting['scope.userInfo']) {
			// 如果已经授权,则执行后续操作
			uni.getSetting({
				success(res) {
					$that.hasOpenid = true;  //用户页面展示是否授权的变量
				}
			})
		} else if (!res.authSetting['scope.userInfo']) {
			// 如果没有授权则进行提前授权--进入页面时弹出
			uni.authorize({
				// 配置授权选项--微信步数
				scope:'scope.userInfo',
				success(res){
					$that.hasOpenid = false;  //用户页面展示是否授权的变量
				},
				fail(err){
					console.log(err)
				}
			})
		}
	}
  })
}，
methods:{
  //授权登录根据code调用后端接口获取openId
   bindgetuserinfo(){
			var $that = this;
			uni.login({
				success:function(res){
					var appId = "123456789";
					var appSecret = "123456789";
					var param = {
						appId:appId,
						appSecret:appSecret,
						code:res.code
					}
					//这里用的是自己封装的ajax请求方法
					$that.$http.get($that.$api.GetWeiChatOpenID,param).then((res)=>{
						if(res.StatusCode=='10000000'){
							$that.openId = res.Data.openid;
							uni.setStorageSync('openId',$that.openId);
							$that.hasOpenid = true;
						}
					})
				}
			})
		},
}

3、后端接口返回的图片二进制流前端用来展示图片验证码需要转换成base64图片

<template>
	<div class="inpput-section" @tap="reqWebcode" >
		<image :src= "'data:image/png;base64,'+web_code" style="width:250upx;height:100upx;margin-top:-25upx"/></image>
		<view class="text-gray font-28" style="margin-top: -5upx;">点击图片刷新</view>
	</div>
</template>
<script>
    export default{
        data(){
             return{
                  web_code: '',//获取的图片验证码地址
				  imgCode:'',//输入的图片验证码
             }
       },
        methods:{
           // 获取图片验证码
			reqWebcode(e) {
				var $that = this;
				uni.request({
					url:$that.$http.host()+'/api/Message/GetVerificationCode', 
					method: 'GET',
					responseType: 'arraybuffer', //这个必须有
					data: {
						clientID:123456789,
						AuthKey:'123456789',
						mobile:123456789
					},
					header: {
					   'content-type': 'application/json;charset=utf-8'
					},
					success: function (res) {
						var base64 = wx.arrayBufferToBase64(res.data);
						$that.web_code=base64
					},
				})
			},
        }
    }
</script>

4、消息列表点击详情传递参数跳转详情页面

//列表页
<templte>
    <view class="cu-card case" v-for="(temp,index) in messList" :key="index"  @tap="getDetail(temp)">
    	<view class="cu-item shadow">
			<view class="image">
				<image :src="temp.ThumbImg" mode="widthFix" style="height:300upx"></image>
			</view>
			<view class="cu-list">
				<view class="cu-item" style="padding:0 30upx 10upx 30upx">
					<view class="titel">{{temp.ArticleTitle}}</view>
					<view class="text-gray">{{temp.ArticleDescription}}</view>
					<view class="d-flex justfy-content-end align-items-center">
						<view class="text-gray">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default{
		data(){
			return{
				messList:[],
				param:{
					storeID:44484,
				    channelCode:'Activity',//频道编码 Notice公告 Activity活动消息
				}
			}
		},
		onShow(){
			this.getMessage(this.param);
		},
		methods:{
			getMessage(e){
				uni.showLoading({
					title: `加载中`,
					icon: "none",
					duration: 2000
				})
				this.$http.get(this.$api.GetArticleList,e).then((res)=>{
					uni.hideLoading()
					if(res.StatusCode=="10000000"){
						this.messList = res.Data;
					}
				})
			},
			getDetail(e){
				let detail = {
					title: e.ArticleTitle,
					id: e.ArticleID,
				};
				uni.navigateTo({
					url: 'article-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
				});
			}
		}
	}
</script>
//详情页
<template>
	<view class="content">
		 <rich-text :nodes="articleDetail"></rich-text>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				article:'',
				articleDetail:'',
			}
		},
		onLoad(event) {
			this.article = JSON.parse(decodeURIComponent(event.detailDate));
			//设置详情标题
			uni.setNavigationBarTitle({
				title: this.article.title
			});
		},
		onShow(){
			var url = this.$api.GetArticle+this.article.id;
			this.$http.get(url).then((res)=>{
				if(res.StatusCode=='10000000'){
					this.articleDetail =res.Data.Content;
					
				}
			})
		},
	}
</script>

5、从小程序内跳转外部H5链接
（1）先建立一个存放 的webview.vue文件

<template>
	<view>
	    <web-view :src="url"></web-view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                url: '',
            }
        },
        onLoad(e) {
			this.url = JSON.parse(decodeURIComponent(e.detailData)).url+"?"+JSON.parse(decodeURIComponent(e.detailData)).param;
		}
    }
</script>

(2)在跳转点击的时候把url和参数传递过来如下封装的方法

//跳转外部h5链接
jumpH5(url){
		let detail = {
			url:url.split("?")[0],
			param:url.split("?")[1]
		}
		uni.navigateTo({
		   //根据当前文件和webview文件的相对路径带参跳转
			url:'../../web-view/web-view?detailData='+encodeURIComponent(JSON.stringify(detail))
		})
	},