此帖记录下uniapp或者小程序开发过程中常见需求和操作

409 阅读3分钟

1. 要求输入框输入正整数?

6048dcbd63e4e158a704add46a79ca1.jpg

<input type="number" 
style="text-align: right;"
v-model="orderInstallDetail.install.installMaterial.pipaLength"	placeholder="请输入" />

可以直接用uniapp的原生输入框input,设置type=number就行了,电脑可能看不出来,手机就是弹出数字键盘。

2. github上的代码库怎么迁移阿里云上面 help.aliyun.com/document_de…

迁移过去提交的地址还是github上的,记得删掉本地的用阿里云的代码地址再拉一遍。

3. uniapp上传图片怎么做?

一般我们开发应用会配合组件库,比如我用到uview,其实uview也是封装了uniapp原生的uni.uploadFile这个api,如下图,

image.png

组件库源码u-upload.vue里做好以上修改以后,uview组件库的用法也很简单。action是后端给你的上传文件地址,假如后端还需要你传别的参数进去,就是额外参数,那么就用form-data={}这种传进去就ok了,报错不要慌,看清楚后端的请求头呀还有传值要求,修改就ok了。下面是例子:

<u-upload ref="uUpload" :action="action" :fileList="confirmFileList" upload-text="上传现场勘测照片"
						:custom-btn="true" :max-count="5" del-bg-color="#676767" @on-remove="onConFirmRemove"
						@on-choose-complete="onConFirmChange" :auto-upload="false" :form-data="{bizType:'TEST_UPLOAD'}">
						<view :style="{width: upWidth +'rpx'}" slot="addBtn" class="slot-btn"
							hover-class="slot-btn__hover" hover-stay-time="150">
							<image style="width: 72rpx;height: 72rpx" src="../../static/img/order/addbtn.png" mode="">
							</image>
							<view style="color:#000;font-size: 24rpx;">安装确认书</view>
						</view>
					</u-upload>

data里面:

	confirmFileList: [], //安装确认书上传列表
        action: 'http://XXX.XXX.XXX.XXX/api/file/anyone/upload' //服务器上传地址
        

我这边还是手动上传,来个按钮点击触发就行,:auto-upload="true"配这个属性就是自动,就不用写下面的。

	submit() {
				this.$refs.uUpload.upload();
			},

然后就成功了。 image.png

4. uniapp开发微信小程序时,真机调试工具调试都能正常运行,正常跳转,但是发布了体验版就不行

原因:体验版没有配置合法域名,只要把vconsole打开,就能正常运行 图片.png

或者去配置域名就行了。

5. 微信小程序原生数组的push方法有问题

原生微信小程序使用数组的push方法好像是push不进去,起因是我用vant-weapp的uploader组件上传图片,完了要调用查询订单详情的接口回显图片,uploader的图片要回显示,必须是file-list:[{url:'.......'}]这种格式的,然后我的data里面定义的是fileList:[],然后请求回来直接用this.data.push({url:'....'})这样的不行,查询详情的接口是放在onLoad里面的,然后用的是async,await来模拟同步的,再onLoad里面请求前面打印出来的fileList是[],没有push进去。

解决方法是:再请求那里新定义一个变量,然后让那个变量push,然后再用this.setData({fileList:那个变量}),然后数据就正常push进去了。

// 查询订单详情,编辑时订单详情回显,

  async getOrderDetail() {

    let res = await getOrderDetail(this.data.orderId)

    this.setData({

      bcdWaybill:res.data.bcdWaybill

    })

    let newFileList = []

    newFileList.push({url:res.data.bcdWaybill.goodsImage})

    this.setData({

      fileList:newFileList

    })

  },

不知道uniapp里面有没有这样的问题。

6. idea,git pull拉不了代码,说你本地和远程的有不一样咋弄

图片.png

第一步:先commit

第二步:储存你的修改

图片.png

第三步:拉代码,会提示这个

第四步:取出我们的修改 图片.png

7. 用uniapp做h5的时候要引入一个外部js文件,比如微信小程序官方的sdk?

它不能和比如微信小程序一样上面加一个script标签,然后再再src里面填地址,它要再app.vue里面的onLaunch用如下方法引入。

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			var script = document.createElement('script');
			script.src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js";
			document.body.appendChild(script);
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	  @import 'uni_modules/uview-ui/index.scss'
</style>


6. uniapp的项目请求连的是本机服务器,可能会出现真机上接口没反应的问题

必须要部署到服务器上,因为连接本机请求是http开头的,而部署到服务器上的请求域名是https开头的。

**7.uniapp中的uni.scancode中使用uni.showToast有bug,在succcess回调里面使用uni.showToast只是展示弹窗一闪而过,代码如下:

图片.png 消息外面包一个定时器就可以解决了

图片.png 或者是改变一种 消息提示方式 ,改为模态框的形式,uni.showModal