# consultationUniapp

**Repository Path**: Xbaiss/consultationUniapp

## Basic Information

- **Project Name**: consultationUniapp
- **Description**: 基于uniApp开发的兼容H5以及微信小程序的练手项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-04-02
- **Last Updated**: 2025-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# consultationUniapp
uni-app
# 介绍
基于uniApp开发的兼容H5以及微信小程序的练手项目

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

    官网【[](https://uniapp.dcloud.io/)】

    材料【[博文](https://blog.csdn.net/gao_xu_520/article/details/100920972)】

    视频 [入门教程](https://www.bilibili.com/video/BV1pE411Z7E8?p=1)
    
    
 uni-app 改变不了小程序，只是做兼容小程序
 

 
# 创建项目
   
   [官网介绍](https://uniapp.dcloud.io/quickstart-hx)
   
# 开发规范

    为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

    1、页面文件遵循[ Vue 单文件组件 (SFC) 规范](https://vue-loader.vuejs.org/zh/spec.html)
    2、组件标签靠近小程序规范，详见[uni-app 组件规范](https://uniapp.dcloud.io/component/README)
    3、接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app[接口规范](https://uniapp.dcloud.io/api/README)
    4、数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
    5、为兼容多端运行，建议使用flex布局进行开发
    
# 页面样式与布局

[](https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e6%a0%b7%e5%bc%8f%e4%b8%8e%e5%b8%83%e5%b1%80)

## 单位

    设计稿1px/设计稿基准宽度 = 框架样式1px/750px


    如果设计稿是640px ,a元素在设计稿是宽 100px，那么a 在uni-app 宽= 750*100/640

    如果设计稿是375px ,a元素在设计稿是宽 200px，那么a 在uni-app 宽= 750*200/375

    uni-app 按照这上面的比例的计算的话，就是以750 设计来弄，uni-app会自动适配 任何手机的屏幕，

    App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了

## 样式导入
    
    使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
    @import "../../common/uni.css";
    
## 内联样式
    
    在 uni-app 中不能使用 * 选择器。
    <view :style="{color:color}" /> <view class="normal_view" />
    
## 选择器

[选择器](https://uniapp.dcloud.io/frame?id=%e9%80%89%e6%8b%a9%e5%99%a8)

    注意：

        在 uni-app 中不能使用 * 选择器。
        微信小程序自定义组件中仅支持 class 选择器
        page 相当于 body 节点，例如：

        <!-- 设置页面背景颜色，使用 scoped 会导致失效 -->
        page {
          background-color:#ccc;
        }


## Flex布局
 
 为支持跨平台，框架建议使用Flex布局，关于Flex布局可以参考外部文档A Complete Guide to Flexbox、阮一峰的flex教程等。

## 背景图片

    支持 base64 格式图片。
    支持网络路径图片。
    使用本地路径背景图片需注意：
    图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
    图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
    本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）
     .test2 {
         background-image: url('~@/static/logo.png');
     }
 
## 字体图标

    ①支持 base64 格式字体图标。
    ②支持网络路径字体图标。
    ③网络路径必须加协议头 https。
    ④从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。
    ⑤uni-app 本地路径图标字体支持情况：
        字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
        字体文件大于等于 40kb， 需开发者自己转换，否则使用将不生效；
        字体文件的引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。 
        
        
## style,class 三元换算
    
    :class="{ active: isActive, 'text-danger': hasError }"
    :class="[{ active: isActive }, errorClass]"
    :class="[isActive ? activeClass : '', errorClass]">
    
    v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
    :style="[{ color: activeColor, fontSize: fontSize + 'px' }]"
    
# 事件

## 事件修饰符
  
   修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
   
   v-on 提供了事件修饰符:
   
   .stop: 各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
   .native: 监听原生事件，仅在 H5 平台支持
   .prevent: 仅在 H5 平台支持
   .capture: 仅在 H5 平台支持
   .self: 仅在 H5 平台支持
   .once: 仅在 H5 平台支持
   .passive: 仅在 H5 平台支持
   
   注意：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
   
   1. 为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的 bind 和 catch 进行事件绑定。
   2. 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
   
    <view class="mask" @touchmove.stop.prevent="moveHandle"></view>
    
   3.按键修饰符：uni-app 运行在手机端，没有键盘事件，所以不支持按键修饰符。
   
## 事件

### 踩坑
    
    1. 平台差异所致，bind,catch事件同时绑定时候，只会触发bind,catch不会被触发

## 是
         
# 配置相关
    
   [配置列表](https://uniapp.dcloud.io/collocation/pages?id=%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%88%97%e8%a1%a8)
    pages.json
    
# 生命周期

 [生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle)
 
# 路由


uni-app 有两种路由跳转方式：

使用navigator组件跳转，调用API（uninavigateTo(OBJECT)/uni.redirectTo(OBJECT)/uni.reLaunch(OBJECT)/uni.switchTab(OBJECT)/uni.navigateBack(OBJECT)）跳转。 

    <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
    </navigator> 这个类似a标签

    uni.navigateTo({
        url: 'test?id=1&name=uniapp'
    });

注意：uni.navigateTo 无法跳转到页面的情况下，一般是因为该链接地址在tabBar里面，所以不能用uni.navigateTo，而是uni.switchTab

# 判断平台

## 条件编辑
  
  
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在

#ifndef：if not defined 除了某平台均存在

%PLATFORM%：平台名称
 
## 条件编译写法：
 
仅出现在 App 平台下的代码
    
   #ifdef APP-PLUS
   需条件编译的代码
   #endif
   
除了 H5 平台，其它平台均存在的代码 

   #ifndef H5
   需条件编译的代码
   #endif
   
在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）


#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

   
    ①、js
    	// #ifdef H5 || APP-PLUS
    		该代码仅出现在H5和 5+App的情况
    	// #endif
     
    	// #ifndef H5
    		该代码不会出现在H5的情况
    	// #endif
     
     
    ②、组件
        <!-- #ifdef H5-->
            <view>显示</view>
        <!-- #endif-->
         
        <!-- #ifdef  MP-->
            <view>微信小程序</view>
        <!-- #endif-->
        
    ③、样式
    
        /* #ifdef H5 */
            .wx-color{
                color:#f00;
            }
        /* #endif */
         
        view{
            /* #ifdef H5 */
                color:#f00;
            /* #endif */
        }
        
## uni.getSystemInfoSync().platform

    运行期判断 运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具（在百度小程序开发工具、微信小程序开发工具、支付宝小程序开发工具中使用 uni.getSystemInfoSync().platform 返回值均为 devtools）
    
    switch(uni.getSystemInfoSync().platform){
        case 'android':
           console.log('运行Android上')
           break;
        case 'ios':
           console.log('运行iOS上')
           break;
        default:
           console.log('运行在开发者工具上')
           break;
    }
    
    
# 第三方登录

因小程序和app登录接口不同，需要前端进行跨域兼容处理

小程序只能微信登录，qq,微博等其他的第三方登录 是不行的。

  [文档查看](http://www.html5plus.org/doc/zh_cn/oauth.html)

## 小程序
    
    1.小程序配置
    
        manifest.json 编写appid
        
        "mp-weixin":{
            "appid":"小程序的appid"
        }
       
    2.接口地址
    
    [用户信息](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html)
    
    编写小程序登录
    
    
    [微信登录](https://cloud.tencent.com/developer/article/1410675)
    [微信](https://www.cnblogs.com/wfaceboss/p/10472413.html)
    
    
    <template>
        <view>
            <!-- #ifdef MP-WEIXIN-->
            <button type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">微信登录</button>
            <!-- #endif-->
        </view>
    </template>

    <script>
          import API from '@/utils/api.js'
        export default {
            data() {
                return {}
            },
            components: {},
            onLoad(option) {},
            methods: {
                wxGetUserInfo(userInfo) {
                    // 1. 点击微信 登录 ：获取用户的信息
                    console.log('userInfo', userInfo)
                    //2.获取openid 唯一性
                    uni.login({
                        success: function(el) {
                            console.log(el, 'sss')
                            let params = {
                                code: el.code
                            };
                            //3.获取openid sessinkey
                            API.getOpenId(params).then(res => {
                                if (res.success === true) {
                                    uni.setStorageSync('openid', res.data.openid);
                                    uni.setStorageSync('sessinkey', res.data.session_key);
                                }
                            })
                            if (!userInfo.detail.iv) {
                                uni.showToast({
                                    title: "您取消了授权,登录失败",
                                    icon: "none"
                                });
                                return false;
                            }
                        },
                    })
                }

            },
        }
    </script>

            
     
### 问题

1.
 manifest.json 编写appid 错误

2. getUserInfo:fail 系统错误，错误码：-12001,invalid scope
   
   不是该小程序的开发者
   
3. s 
    
    
## APP 


  [h5+app登录](http://www.hcoder.net/tutorials/info_1361.html)
  [登录功能APP端代码编写](https://www.bilibili.com/video/BV1xy4y167NC)
  [uni-app 第三方登录（小程序篇）](https://www.kancloud.cn/guobaoguo/uni-app/821801)
  [uniapp 中APP使用微信授权登录完整总结](https://www.jianshu.com/p/4278b41d9c2b)

    app 端支持微信、qq、微博等多种登录方式，都需要申请对应的开发者并获取对应的 appid。获取对应的appid后打开 manifest 可视化操作填写即可。
    
    app  端 可以多端登录，去配置就好，下面是以微信登录
    
    1.APP模块权限配置 打钩oAuth(登录鉴权)  ->微信登录（打钩） 然后填写appid appsecret
            
            
      <template>
          <view>
              <!-- #ifdef APP-PLUS -->
              <button type="primary" @click="getWxApp">APP中微信登录</button>
              <!-- #endif -->
          </view>
      </template>
      
      <script>
          import API from '@/utils/api.js'
          export default {
              data() {
                  return {}
              },
              components: {},
              onLoad(option) {},
              methods: {
                  
                  //微信 小程序   登录 App
                  getWxApp: function() {
                      //1.获取服务商https://uniapp.dcloud.io/api/plugins/provider?id=getprovider
                      uni.getProvider({
                          service: 'oauth',
                          success: function(res) {
                              console.log(res.provider)
                              // 是否有微信
                              if (~res.provider.indexOf('weixin')) {
                                  uni.login({
                                      provider: 'weixin',
                                      success: function(loginRes) {
                                          // 获取微信登录的信息
                                          console.log(JSON.stringify(loginRes));
                                          //  [获取用户信息](https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo)
                                          uni.getUserInfo({
                                              provider: 'weixin',
                                              success: function(infoRes) {
                                                  console.log('用户昵称为：' + infoRes.userInfo
                                                      .nickName);
                                              }
                                          });
                                      }
                                  });
                              }
                          }
                      });
                  }
      
              },
          }
      </script>
              


## openid和UnionID的区别

    OpenID： 普通用户的标识，对当前开发者帐号唯一。一个openid对应一个公众号。
    
    UnionID ：用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
    
    如果只是考虑一端的话，那可以用openid 做唯一的标识。
    
    如果要考虑多端的话，唯一性时 去微信开发平台，申请账号，认证好了。可以把公众号，小程序，APP的项目全部添加在一个账号下面
    这样的话，就可以使用UnionID做唯一性。
    
    openid 每一个应用就会有一个openid，每个应用的openid 都是不一样。每个应用的unionId是一样的
    
    
# api

## 请求
 
 [uni.request](https://uniapp.dcloud.io/api/request/request)
 
## uni.chooseImage  选择手机图片

  [](https://uniapp.dcloud.io/api/media/image?id=chooseimage)
  
   功能是多端支持，但是属性兼容性不一样
   
### 问题
    
    [uniapp调用API_uni.chooseImage的相机的调用不起来](https://blog.csdn.net/qq_37564189/article/details/102966943)
    
## uni.uploadFile 上传

    [](https://uniapp.dcloud.io/api/request/network-file?id=uploadfile)
    
    将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
    如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。
    
    注意：App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
    
## 数据缓存

    uni.setStorage 这个是异步（一边存储数据一边可以做其他的事情）
    
    uni.setStorageSync 同步（存储数据完成后，再做其他的事情）
    
    [数据缓存](https://uniapp.dcloud.io/api/storage/storage?id=setstorage)
    
## 设备信息
 
  [](https://uniapp.dcloud.io/api/system/info)
  
## onPullDownRefresh 下拉刷新

    需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
    
    当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
    
    [](https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh)
    
## 上拉刷新

    俩种情况下：
        a. 使用scroll-view滚动组件，当滚动在一定的区域的时候，触发刷新数据
        b.页面滚动底部的区域的时候，触发刷新数据【onReachBottom 利用生命周期 ，当页面滚动到底部的时候，去做触发】
      
    俩种方式不能共存
  
  


# 功能

## 分享

[官网分享](https://uniapp.dcloud.io/api/plugins/share)

在不同平台，分享的调用方式和逻辑有较大差异。

    1.App：可以自主控制分享内容、分享形式及分享平台
    2.使用 uni.share API方式调用社交sdk分享
    3.使用[plus.share.sendWithSystem](http://www.html5plus.org/doc/zh_cn/share.html#plus.share.sendWithSystem)呼起手机os的系统分享菜单
    4.小程序：不支持API调用，只能用户主动点击触发分享。可使用自定义按钮方式 <button open-type="share"> 或监听系统右上角的分享按钮 onShareAppMessage 进行自定义分享内容
    5. H5：如果是普通浏览器，浏览器自带分享按钮；如果是在微信内嵌浏览器中，可调用js-sdk进行分享，[参考](https://ask.dcloud.net.cn/article/35380)





### 小程序

    1. 方法是 [onshareappmessage 生命周期](https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage)
            
           export default {
                data() {
                    return {
                    }
                },
                onShareAppMessage:function(){
                   return {
                       title:"朋友们",
                       path:"pages/index/index"
                   }
                }
           
            }
            
            效果是：点击小程序顶部的”三个点“-》转发，就会弹出分享的窗口
            
            注意：在小程序端的话，只能分享到微信聊天界面，不能分享到朋友圈

### app

[官网分享](https://uniapp.dcloud.io/api/plugins/share)

1. 设置 manifest.json: app 模块 配置： 
    
        a.share(分享) 打钩
        b.需要配置 微信，新浪，qq  
        注意：如果不打包 的话，可以随便写，一旦要打包就要写对。打包的时候数据也要填对。

2. share/index.vue 代码开发
    
    <template>
    	<view class="index">
            分享
            <!-- #ifdef APP-PLUS-->
                <button type="primary" @click="share">分享</button>
            <!-- #endif-->
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    			}
    		},
    		onLoad() {
    		},
    		methods: {
                share:function(){
                    uni.share({
                        provider: "weixin",
                        scene: "WXSceneSession",
                        type: 1,
                        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
                        success: function (res) {
                            console.log("success:" + JSON.stringify(res));
                        },
                        fail: function (err) {
                            console.log("fail:" + JSON.stringify(err));
                        }
                    });
                },
    		}
    	
        }
    </script>
    
3. 真机上调试 

## 字体图片 阿里使用
    
    1. 从阿里下载好图标，有2种方式 
    
        (a) 把iconfont.css 代码复制到common/css/iconfont.cs
         然后 @font-face修改成 下面 base64：
         @font-face {
           font-family: "iconfont";
           src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
         }
         
         .iconfont {
           font-family: "iconfont" !important;
           font-size: 16px;
           font-style: normal;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
         }
         
         .icon-yonghutouxiang:before {
           content: "\e851";
         }
         
         .icon-mima:before {
           content: "\e63a";
         }
         
          (b)  或改成线上地址
              @font-face {
                font-family: 'iconfont';  /* project id 1629742 */
                src: url('//at.alicdn.com/t/font_1629742_u349todt5k.eot');
                src: url('//at.alicdn.com/t/font_1629742_u349todt5k.eot?#iefix') format('embedded-opentype'),
                url('//at.alicdn.com/t/font_1629742_u349todt5k.woff2') format('woff2'),
                url('//at.alicdn.com/t/font_1629742_u349todt5k.woff') format('woff'),
                url('//at.alicdn.com/t/font_1629742_u349todt5k.ttf') format('truetype'),
                url('//at.alicdn.com/t/font_1629742_u349todt5k.svg#iconfont') format('svg');
              }
    2. 代码使用
    
      <i class="iconfont icon-close-b"></i>
    

## 打包

    [uni-app 发布](https://uniapp.dcloud.io/quickstart?id=%e5%8f%91%e5%b8%83uni-app)

## 打电话
 
 [拔打电话](https://uniapp.dcloud.io/api/system/phone?id=makephonecall)
## 是



# 常见问题

##  uni-app 使用npm 
    
    直接在项目中，npm i
 
## 全局变量
  
   [全局变量](https://ask.dcloud.net.cn/article/35021)
     
   在app.vue  中
   export default {
       // 全局变量
       globalData: {  
          name:"uni-app"
       },  
   }
     console.log(getApp().globalData.name) 
    
##  uni-app取消原生头部导航栏、

    a.取消uni-app原生头部导航栏（全局取消）
        所有页面都去掉：在pages.json里
         "globalStyle": {
            "navigationStyle":"custom"
    	}
     
    b.单页面取消
    
        新版小程序支持page->style配置navigationStyle为custom   =>网址  https://uniapp.dcloud.io/collocation/pages?id=style
     
        app和h5配置titleNView为false   =>网址 https://uniapp.dcloud.io/collocation/pages?id=app-plus
     
     
       如：
     
        {
     
            “page”:"pages/index/index",

            "style":{

                "navigationStyle":"custom",

                "app-plus":{

                    "titleNView":false
        
                }

            }
    
        }
3. 设置每个页面的颜色，加上scoped   小程序这边就不行了,只有去掉scoped，才可以

    <style scoped lang="scss">

2.uni.uploadFile  上传图片到服务器，小程序可以，但是h5不行，

应该是 小程序的默认发送格式 跟 h5 的发送格式不一样， 后端没做兼容处理。。暂时没处理，待验证


# 视频案例

1.  悦读案例

 [视频教程](https://www.bilibili.com/video/BV1HE41117qN?from=search&seid=12956094640950504948)
 
 
2.  uni-app基础+进阶+案例

    [uni-app+unicloud](https://www.bilibili.com/video/BV1U5411b7RJ/?spm_id_from=333.788.videocard.2)
3.  官网案例
     
     [官网](https://hellouniapp.dcloud.net.cn/pages/component/view/view)
4.  是