uniapp发的微信小程序，运行抖音测试，已知 登陆 支付 流量不适配，需要修改成抖音的，大佬勿扰，很简单的一个东西，学生可接单赚个零花钱
联系v:av-12390

刚开始找了很多资料，同时结合读AWS的官方文档，没有提及uniapp如何上传AWS S3的完整实现方法。

之前用了JS-SDK在h5端浏览器上传是没问题，某天试试运行到手机上直接挂了，运行到手机上根本就不支持这个sdk。没法子了只能找uniapp官方自带的上传方式了，使用uni.uploadFile上传，上传需要的参数又去AWS的官方文档上找，啃这AWS文档折腾大半天，尝试了不同的方式，总算是通过uni.uploadFile()成功的传到了AWS S3上。

在uni.uploadFile整理参数时折腾了很久，之前一直报各种问题，不是报SignatureDoesNotMatch就是AccessDenied等等问题，其实这些问题还是由于formData的参数不正确，所以解决的方案还是要认真对好formData里参数！！！之前一直就是卡在这个formData地方。

formData里需要的参数参考资料：
https://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html - 官方form表单示例
https://docs.aws.amazon.com/zh_cn/IAM/latest/UserGuide/create-signed-request.html - 计算签名

源码测试：https://ext.dcloud.net.cn/plugin?id=9502
有需要的可联系我，我有套用不到了，转让！！！！！！！！

QQ:917736677

• HBuilder 3.94 正式版已发布，欢迎体验uni-app x。https://uniapp.dcloud.net.cn/uni-app-x/

• 2023年插件大赛启动，欢迎踊跃参加。https://ask.dcloud.net.cn/article/40812

无需插件实现。支持插入图片，可支持多sheet 修改样式等多种操作
最终导出效果

体验地址：
https://pan.quark.cn/s/12506b61c5ce

Segmented 分段器

何时使用

• 用于展示多个选项并允许用户选择其中单个选项；
• 当切换选中选项时，关联区域的内容会发生变化。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

大型分段器

通过设置 size 属性为 "large"，创建一个大型分段器。

<wd-segmented :options="list" v-model:value="current" size="large"></wd-segmented>

默认分段器

这是默认尺寸的分段器。

<wd-segmented :options="list" v-model:value="current1"></wd-segmented>

小型分段器

通过设置 size 属性为 "small"，创建一个小型分段器。

<wd-segmented :options="list" v-model:value="current2" size="small"></wd-segmented>

带振动效果的分段器

通过设置 vibrate-short 属性为 true，使手机在切换选项时产生短暂振动。

<wd-segmented :options="list" v-model:value="current3" :vibrate-short="true"></wd-segmented>

禁用分段器

通过设置 disabled 属性为 true，禁用分段器。

<wd-segmented :options="list" v-model:value="current5" disabled></wd-segmented>

自定义渲染分段器标签

使用插槽 label 可以自定义渲染分段器的标签内容。

<wd-segmented :options="list1" v-model:value="current4" :vibrate-short="true">  
  <template #label="{ option }">  
    <view class="section-slot">  
      <wd-img round width="32px" height="32px" :src="option.payload.avatar" />  
      <view class="name">  
        {{ option.value }}  
      </view>  
    </view>  
  </template>  
</wd-segmented>

const list1 = ref([  
  {  
    value: '李雷',  
    disabled: false,  
    payload: {  
      avatar: 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/redpanda.jpg'  
    }  
  },  
  {  
    value: '韩梅梅',  
    disabled: false,  
    payload: {  
      avatar: 'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/capybara.jpg'  
    }  
  }  
])

.section {  
  width: 100%;  
  padding: 0 24rpx;  
  box-sizing: border-box;  
  &-slot {  
    padding: 4px;  
  }  
}  

请注意，上述示例代码中的 list 和 list1 变量是您在 <script> 部分设置的示例数据。您可以根据您的实际需求自定义这些数据。

Attributes

SegmentedOption

Events

Slots

外部样式类

地址

Github
文档网站
插件市场
QQ群

解决思路

在应用首次加载时，依次调用switchTab预加载dom

1、在App.vue的onLaunch中加入跳转页面

注意：首页放最后

onLaunch: async function() {  

            const pages = ['页面1', '页面2', '页面3','首页'];    
            for (let i = 0; i < pages.length; i++) {    
                try {    
                    await new Promise((resolve, reject) => {  
                       uni.switchTab({    
                         url: pages[i],    
                         success: () => {    
                           resolve();    
                         },    
                         fail: () => {    
                           reject();    
                         }    
                       });  
                     });  
                } catch (error) {    
                  console.error('Failed to switch tabbar page:', pages[i]);    
                }  
                if(i===pages.length-1){  
                    this.$store.commit('setIsOkSwichTab',true)  
                }  
            }   
        },

2、在每个页面通过store的全局变量判断是否显示

用v-show判断为true时才显示，这样做是为了更快的进入首页，switchTab时，在onLoad尽量少做耗时操作

App实测可行，如果有更好的方案可以分享分享，其实看了还有些解决方案
1、共用同一个tabbar主页，通过v-if来控制各个页面，会有回到顶部的问题，每次切换都会回到顶部，用v-show的话卡，多个页面公用一个容器，除非再引入组件来控制高度
2、通过uni-simple-router，动态路由控制，感觉相对麻烦点，不过效果应该会好点，类似vue的router-view显示了，没用过
3、依次通过switchTab加载tabBar，这样就想自动帮用户都点了一下tabbar了，会延长APP应用启动时间
4、uni.preloadPage，预加载页面，我用的时候就是H5端可以，到实体机APP就不行了，可能版本问题
5、还有一种是，类似微信那样，直接四个页面都展示，还可以左右滑动，用swiper-item来做，类似轮播图，就是四个页面都展示了，问题就是加载东西多会卡卡卡

大概能找到的和想到的就这些了，坑坑坑啊

链接：Uniapp 横向滚动抽奖页面 组件 引用即可 全端

APP主办者在填写有关备案材料并实名核验后，由其网络接入服务提供者或应用分发平台通过“国家互联网基础资源管理系统”（即ICP/IP地址/域名信息备案管理系统，以下简称备案系统），向APP主办者住所所在地通信管理局在线提交备案申请。

一图读懂App备案

ICP/IP地址/域名信息备案管理系统：https://beian.miit.gov.cn/#/Integrated/index

互联网信息服务算法备案系统：https://beian.cac.gov.cn/#/index

备案整体流程

备案信息填写（主体信息）、平台初审、工信部短信核验、通管局审核和备案成功

app到各大服务厂商处备案

APP 备案申请材料

APP 名称
APP 图标
APP 运行平台（iOS、安卓）
APP 包名或者 Bundle ID
公钥、MD5值， APP 证书的数字指纹值。 【详情请参见】。
SDK 功能类型与服务厂商信息
接入商可备案的云资源
前置审批文件（新闻、出版、教育、影视、宗教等审批文件）
APP 解析到服务商的域名（域名实名认证与备案主体一致）

阿里云

可选择账号内符合备案要求的云服务器（系统将自动核销该服务器内的ICP备案服务码），或使用ICP备案服务码，详情请查看帮助文档详情请查看帮助文。

App备案说明：https://wanwang.aliyun.com/qualificationrec/bazszl
备案单个网站/App 填写信息指南

阿里云 填写App特征信息指南

腾讯云

备案说明：https://cloud.tencent.com/document/product/243/97691

腾讯云 APP 特征信息填写指南。

支付宝小程序云

用支付宝云开发免费领取域名备案码，支付宝小程序云服务空间在过去90天累计消费满100元时可申请阿里云备案码，消费账单统计时间为T+1，每个空间可申请一个备案码。

领取域名备案码：https://open.alipay.com/portal/forum/post/127201023

uniCloud-支付宝小程序云说明：https://doc.dcloud.net.cn/uniCloud/price.html#alipay

百度智能云

备案说明：https://cloud.baidu.com/doc/BeiAn/s/Sllx46whu

小程序到各自小程序平台提交备案

小程序备案资料

小程序信息
主体信息

微信小程序

小程序备案操作指引：https://developers.weixin.qq.com/miniprogram/product/record/record_guidelines.html

● 新增（未上架）小程序于9月4日开放备案入口
● 存量（已上架）小程序备案入口已开放，开发者可以通过设置页备案入口和首页的吸顶提示进行备案，服务商备案api也同步支持存量小程序备案。为保证开发者备案体验，存量小程序提交量有动态额度调整，若当日配额消耗完毕，备案入口及提交时均会有相关提示，次日早十点会刷新配额。
若微信小程序已上架，请于2024年3月31日前完成备案，逾期未完成备案，平台将按照备案相关规定于2024年4月1日起进行清退处理。详情

如果同一主体下有很多个小程序，需要一个备案通过后，再提交下一个备案申请。同时提交会提示：

抖音小程序

小程序ICP备案指引 https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/operation/settle/ICPFiling/ICPintroduce

关于开展抖音小程序ICP备案通知

2024年1月22日起，未发起备案提交的小程序将限制版本更新；

2024年2月20日起，未完成备案的小程序将限制版本更新；

2024年3月15日后提交备案的小程序将不保证2024.3.31前平台可初审通过；

2024年3月31日后未完成备案小程序平台将进行清理。

小程序备案入口，详见：抖音开放平台（抖音开放平台 - 抖音小程序、字节小程序、头条小程序）-控制台-选择具体需操作备案的小程序-设置-基础设置-备案信息，点击「去填写」即可。

京东小程序

备案指引：https://mp-docs.jd.com/doc/operation/beian/2300

快手小程序

备案指引：快手小程序平台备案入口开放

小程序安全信息字段补充通知
补充信息：小程序主域名、主域名ip、ip地址归属地

百度小程序

备案指引：https://smartprogram.baidu.com/docs/introduction/register_filings/
https://cloud.baidu.com/doc/BeiAn/s/Llm492h9k

支付宝小程序

备案指引：https://opendocs.alipay.com/mini/0adg3d

常见问题

什么时间节点前需完成备案？

新 APP：2023年9月1日起，需履行备案手续后才能上架应用市场。
存量 APP（已上架）：截止2024年3月31日，届时若未及时完成备案，应用市场将按照相关法律法规进行处理。

APP 备案时绑定的域名是否需要先进行网站备案？

不需要，未备案过的域名可以直接用来进行 APP 备案，注意 APP 备案的域名实名与备案主体保持一致。

APP和网站是否可以使用相同的域名？

同一主体下，APP和网站可以使用相同的域名进行备案。

开发者帐号下A应用已完成备案，B应用还需要备案吗？

需要。每一个APP都需要履行APP备案手续。

Swiper 轮播图

用于创建轮播图，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

通过设置 autoplay 属性控制轮播图是否自动播放，设置 current 属性初始化轮播图展示的滑块，监听滑块 click 来处理点击事件，而每一页轮播结束后，会触发 change 事件。通过

<wd-swiper :list="swiperList" autoplay :current="0" @click="handleClick" @change="onChange"></wd-swiper>

const swiperList = ref([  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/redpanda.jpg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/capybara.jpg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/panda.jpg',  
  'https://img.yzcdn.cn/vant/cat.jpeg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/meng.jpg'  
])  
function handleClick(e) {  
  console.log(e)  
}  
function onChange(e) {  
  console.log(e)  
}

点条状指示器

<wd-swiper :list="swiperList" autoplay :current="1" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>

数字指示器

<wd-swiper  
  :list="swiperList"  
  autoplay  
  :current="2"  
  :indicator="{ type: 'fraction' }"  
  indicatorPosition="bottom-right"  
  @click="handleClick"  
  @change="onChange"  
></wd-swiper>

手动切换

<wd-swiper  
  :list="swiperList"  
  :autoplay="false"  
  :current="3"  
  :indicator="{ showControls: true }"  
  :loop="false"  
  @click="handleClick"  
  @change="onChange"  
></wd-swiper>

卡片样式

设置 previousMargin 和 nextMargin 实现卡片轮播的样式。

<view class="card-swiper">  
  <wd-swiper  
    autoplay  
    :current="4"  
    custom-indicator-class="custom-indicator-class"  
    custom-image-class="custom-image"  
    custom-next-image-class="custom-image-prev"  
    custom-prev-image-class="custom-image-prev"  
    :indicator="{ type: 'dots' }"  
    :list="swiperList"  
    previousMargin="24px"  
    nextMargin="24px"  
  ></wd-swiper>  
</view>

.card-swiper {  
  --wot-swiper-radius: 0;  
  --wot-swiper-item-padding: 0 24rpx;  
  --wot-swiper-nav-dot-color: #e7e7e7;  
  --wot-swiper-nav-dot-active-color: #4d80f0;  
  padding-bottom: 24rpx;  
  :deep(.custom-indicator-class) {  
    bottom: -16px;  
  }  
  :deep(.custom-image) {  
    border-radius: 12rpx;  
  }  
  :deep(.custom-image-prev) {  
    height: 168px !important;  
  }  
}

同时展示 2 个滑块

设置 display-multiple-items 属性，控制同时展示的滑块数量。

<view class="card-swiper">  
  <wd-swiper  
    autoplay  
    :current="4"  
    :display-multiple-items="2"  
    custom-indicator-class="custom-indicator-class"  
    custom-image-class="custom-image"  
    custom-next-image-class="custom-image-prev"  
    custom-prev-image-class="custom-image-prev"  
    :indicator="{ type: 'dots' }"  
    :list="swiperList"  
    previousMargin="24px"  
    nextMargin="24px"  
  ></wd-swiper>  
</view>

.card-swiper {  
  --wot-swiper-radius: 0;  
  --wot-swiper-item-padding: 0 24rpx;  
  --wot-swiper-nav-dot-color: #e7e7e7;  
  --wot-swiper-nav-dot-active-color: #4d80f0;  
  padding-bottom: 24rpx;  
  :deep(.custom-indicator-class) {  
    bottom: -16px;  
  }  
  :deep(.custom-image) {  
    border-radius: 12rpx;  
  }  
  :deep(.custom-image-prev) {  
    height: 168px !important;  
  }  
}

垂直方向

direction 设置为 vertical 后滑块会纵向排列。

<wd-swiper  
  :list="swiperList"  
  direction="vertical"  
  indicatorPosition="right"  
  autoplay  
  :current="1"  
  :indicator="{ type: 'dots-bar' }"  
  @click="handleClick"  
  @change="onChange"  
></wd-swiper>

自定义指示器

通过 indicator 插槽可以自定义指示器的样式。

<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay :current="1" @click="handleClick" @change="onChange">  
  <template #indicator="{ current, total }">  
    <view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>  
  </template>  
</wd-swiper>

.custom-indicator {  
  padding: 0 12rpx;  
  height: 48rpx;  
  line-height: 48rpx;  
  border-radius: 45%;  
  background: rgba(0, 0, 0, 0.6);  
  color: #ffffff;  
  font-size: 24rpx;  
}

Attributes

DirectionType

轮播滑动方向，可选值为 'horizontal' 和 'vertical'。

EasingType

切换缓动动画类型，可选值为 'default'、'linear'、'easeInCubic'、'easeOutCubic' 和 'easeInOutCubic'。

IndicatorPositionType

页码信息展示位置，可选值为 'left'、'top-left'、'top'、'top-right'、'bottom-left'、'bottom'、'bottom-right' 和 'right'。

SwiperList

轮播图项的列表配置，包括 value 和 ariaLabel 属性。

SwiperIndicatorProps

Events

Slot

外部样式类

地址

Github
文档网站
插件市场
QQ群

需求-TreeSelect 树形选择

1. 选择任意级别,任何节点都可以被选择
2. 可筛选,模糊搜索，可递归搜索

1. mumu模拟器下载与安装

进入mumu浏览器官方网站下载安装，官方下载连接

2.mumu模拟器设置

a.MuMu模拟器ADB端口信息规则

模拟器端口为动态端口，一般模拟器本体（即多开器内序号0）的端口为16384，多开的模拟器会在此基础上加32，如：

0号16384，1号16416，2号16448，以此类推；

如果模拟器端口被占用了，会在原端口加1，如：

16384被占用，加1，即16385；

另，多开的端口不受占用后的端口影响，依旧在16384的基础上加32。

b.找到自己安装的模拟器的ADB端口
很重要：

c.MuMu模拟器12如何连接adb

执行adb连接命令：

第一步，打开adb安装路径，参考下图，点击地址栏输入CMD，再点击回车键呼出命令提示符窗口；

第二步，在命令提示符窗口内输入adb.exe connect 127.0.0.1:XXXXX，之后点击回车。

注：XXXXX为你安装的模拟器端口号，请参考打开的模拟器问题诊断内展示端口号或MuMu多开器12内的ADB端口信息后再输入。

【自动脚本】
将下段代码另存为.bat文件，双击即可执行。主要更换自己的adb路径和端口

start cmd /k "cd/d D:\Program Files\Netease\MuMuPlayer-12.0\shell && adb connect 127.0.0.1:16384"

3.uni-app 运行设置

打开HBuilder X 依次找到 工具 -->设置 -->运行设置 ，找到ADB路径和Android模拟器端口，

注意：此处的adb路径
（1）可以使用mumu模拟器的路径 \Netease\MuMuPlayer-12.0\shell，
（2）可以使用AndroidSDK的 \android-sdk\platform-tools
（3）可以使用HBuilder 的默认路径

4.运行uni-app项目-运行到手机或模拟器

常规操作，运行到模拟器即可看到Android设备，选中即可运行。

总结，我先安装的Android studio，但是辜负我一腔热忱，调试半天属实不好用，转而使用mumu模拟器，轻快好省，推荐。