uniapp中App端如何获取手机号码

Question

uniapp中开发App端，需要获取本机手机号码，但是看了一下uni app文档，需要开通一键登录，要花钱，有简单获取本机号码，不需要花钱的那种吗？

Answer 1

【相关推荐】

• 这篇博客: uniapp小程序APP实现（图片，视频，文件）的本地或者拍摄上传，删除，预览，编辑功能！中的 uniapp小程序APP实现（图片，视频，文件）的上传，删除，预览，编辑功能！ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  本文章包含了如何实现上传，删除，预览，编辑等功能，代码不多，简单实现，分享给像我一样的小白，和踩过坑的同学们。

  可以先看一下官网预习一下，不然看了代码可能你也不知道在干嘛，授人以鱼不如授人以渔，希望大家以后都能具备自己实现的能力，官网地址我贴在下面：
  上传图片：

  https://uniapp.dcloud.io/api/media/image
  上传视频：https://uniapp.dcloud.io/api/media/video
  上传文件：https://uniapp.dcloud.io/api/media/file

  看完官网应该有一个简单的了解了，其实很简单，官网其实已经封装的很好用了，只是一些细节还需要我们自己来实现，先理清楚思路，上传无非就两种，一种是本地上传，一种是拍摄上传，上传后一种是继续保留在本地，一种是上传到云端，代码如下：
  **

  1. 这里是h5的内容,class命名大家随意 不用按照我的

  **

  <!-- 图片存放内容 -->
  				<view class="uni-uploader-body">
  					<view class="uni-uploader__files">
  						<!-- 图片上传 -->
  						<block v-for="(item,index) in orderinfo.images" :key="index">
  							<view class="uni-uploader__file" style="position: relative;">
  								<!-- 获取图片路径 -->
  								<image class="uni-uploader__img" :src="item.url" @tap="previewImage(item)"></image>
  								<!-- 叉叉删除 图标-->
  								<uni-icons
  									style="position:absolute;top:5px;right:5px;background:rgba(255,255,255,.6);border-radius:50%;"
  									type="closeempty" @tap="delete_file(0,index,item)"></uni-icons>
  							</view>
  						</block>
  						<!-- 图片上传方法 -->
  						<view class="uni-uploader__input-box">
  							<view class="uni-uploader__input" @tap="seletcImage"></view>
  						</view>
  					</view>
  				</view>
  				<!-- 上传视频总div -->
  			<view class="line_box order_box">
  				<!-- 文字标题 -->
  				<view class="info-t">
  					<text class="t_text">拍摄/上传视频</text>
  				</view>
  				<!-- 图片存放内容 -->
  				<view class="up_img">
  					<view style="position: relative;" v-for="(video,index) in orderinfo.videos">
  						<video id="myVideo" :src="video.url" @error="videoErrorCallback" enable-danmu danmu-btn
  							controls>
  						</video>
  						<uni-icons
  							style="position:absolute;top:5px;right:55px;background:rgba(255,255,255,.6);border-radius:50%;z-index: 1;"
  							type="closeempty" @tap="delete_file(1,index,video)"></uni-icons>
  					</view>
  					<!-- 视频上传方法 -->
  					<view>
  						<image src="../../../static/code/video.png" mode="" class="camera" @click="addVideo"></image>
  					</view>
  				</view>
  			</view>
  

  1. JS部分代码

  data() {
  			return {
  				orderinfo: {
  					images: [],
  					videos: []
  				},
  			}
  		},
  		methods: {
  		// 图片和视频上传拍照
  			videoErrorCallback: function() {
  				uni.showModal({
  					content: '视频加载失败',
  					showCancel: false
  				});
  			},
  			// 照片
  			seletcImage() {
  				uni.chooseImage({
  					count: 6,
  					success: res => {
  						if (this.orderinfo.images.length + res.tempFilePaths.length > 6) {
  							$api.msg('最多只能上传6张图片！')
  							return;
  						}
  						this.saveImage(res.tempFilePaths);
  					},
  					fail: (err) => {
  						$api.notauth();
  					}
  				});
  			},
  			saveImage(files) {
  				for (let i = 0; i < files.length; i++) {
  					addfiles({
  						type: 0,
  						wid: this.id || '',
  					}, files[i]).then((res) => {
  						if (200 == res.code) {
  							this.orderinfo.images = this.orderinfo.images.concat(res.data);
  						}
  					})
  				}
  			},
  			// 预览图片
  			previewImage(item) {
  				uni.previewImage({
  					urls: [item.url]
  				})
  			},
  			addVideo() {
  				let _this = this;
  				uni.chooseVideo({
  					count: 1,
  					sourceType: ['camera'],
  					success: res => {
  						this.saveVideo(res.tempFilePath);
  					},
  					fail: (err) => {}
  				});
  			},
  			//
  			saveVideo(files) {
  				addfiles({
  					type: 3,
  					wid: this.id || '',
  				}, files).then((res) => {
  					if (200 == res.code) {
  						this.orderinfo.videos = this.orderinfo.videos.concat(res.data[0]);
  					}
  				})
  			},
  			//删除文件和数据
  			delete_file(type, index, file) {
  				uni.showModal({
  					content: '确定要删除当前文件吗？',
  					success: (res) => {
  						if (res.confirm) {
  							deletefile({
  								'ids': file.id,
  								'urls': file.url
  							}).then(res => {
  								if (res.code == 200) {
  									//(index,1)index是下标 1是单次删除数量  图片视频公用方法
  									type == 0 ? this.orderinfo.images.splice(index, 1) : this.orderinfo
  										.videos
  										.splice(index, 1)
  								}
  							})
  						}
  					}
  				})
  			},
  		}
  

  1. CSS部分按照自己喜欢调整就好 这里我就不贴代码了

  实现后的效果是这样：
  
  点击选择自己想要的那个图片或者视频 也可以手动拍摄上传,上传完成后点击图片或视频可以预览
  

  ×图标点击实现删除
  

  
  整个流程就是这样啦，有疑问欢迎留言！

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^