Taro 3.x 开发 APP 记录 (持续记录中。。。)

本文记录了使用Taro 3.x进行APP开发的过程,包括样式(style)和页面(page)的注意事项,如样式限制、生命周期问题、页面布局等。详细介绍了如何在Xcode中配置HTTP请求,解决真机调试时遇到的问题,如Android和iOS的打包、图标与启动屏幕设置,以及签名证书的生成。此外,还涉及到了如何在APP中唤醒系统浏览器、禁止WebView滚动和动态获取内容高度等技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Taro 3.x 开发 APP 记录

样式 style
  1. 任何组合选择器 样式均会被 RN 忽略,仅支持 类选择器
  2. css 属性均使用驼峰命名法,部分样式不支持;
  3. 不支持background-image 可以使用Image 标签 做背景图;
  4. 对于文本的样式 只在Text 标签生效;
  5. border-radius 只在View 标签生效;
  6. Android 上的RN font-weight 值 只有400 700 normal bold 生效;
    error
  7. 好用的UI组件库 :推荐 React Native Elements
  8. 使用 antd-mobile 过程比较艰难 包内缺少很多依赖 需要手动下载
    看报错 对应下载就好了
    这里是一部分 antd-mobile 缺少的依赖下载
页面 page

生命周期useReachBottom Taro自带生命周期 触底触发 ,但在使用中发现 个别页面 不仅是触及下底 ,触及上底也会触发,usePullDownRefresh 下拉刷新函数居然不执行。做下拉刷新上拉加载的时候要注意;

按钮贴底 : 可以通过 flex:1 通过RN端默认的flex 布局去做,具体该属性的用法&作用 这里不做阐述,一个简单的思路就是在最外层和需要撑起页面空白部分的一层 添加 flex:1 是其撑起空间 从而实现 按钮贴底;

我的理解:

  1. 最外层flex:1 则 最外层撑起 满屏高度;
  2. 需要撑起页面空白部分的一层 flex:1 则 该层撑起空白部分;
    (个人理解,欢迎评论区讨论~)
    这里有一些理解思路,可以看看

插入HTML文本 / 外部网页:Taro 目前不支持RN端插入HTML字符串,推荐使用 react-native-webview 引入webView 还有一些个性化配置 自查 ;(RN原生是有webview 组件的);

2021.8.3 — 动态获取内容高度 用到 injectedJavaScript 时,注入的js
获取内容高度 建议使用document.body.offsetHeight 比 scrollHeight 准确一些

禁止 react-native-webview 组件可滚动,有属性 scrollEnabled={false}
使其高度自适应: 这里可以参考~

( style={ { flex: 0, height: height }} 设置高度必须 设置flex:0)
官网有解释:you need to add flex: 0 to the style if you want to use height property.

app调用相机拍照:Taro 提供 Camera 组件 ,Rn端目前只支持拍照 不支持扫码功能。

重点:调用 api 创建 Camera 上下文需要在 Camera 组件的初始化阶段
使用 react Hooks 时 在 useEffect 方法中初始化失败,需要在 Camera 组件的InitDone 事件中进行初始化。

加载视频组件:Taro 组件库的 Video 组件是不支持RN端的 (其他端均支持),推荐使用 react-native-video 使用它的Video 配置简单 ;
2021.7.8 — 这个需要壳工程的配置,楼主是配置完没效果 一直报错 最后没有选择这个方案)
2021.7.9 — 特意抽时间搞了一下 这个组件不仅要在 项目内install 还要在 壳工程 taro-native-shell 中 npm install && cd ios/ && pod install
2021.7.23 在Android上需要更多配置,不然乱了套了 ,默认controls 会在页面乱跑,尤其是视频列表时。

!注意:

查看 taro-native-shell/ios 下Libraries/ 下有没有 RCTVideo.xcodeproj 文件在这里插入图片描述
没有的话 右键点 Libraries – add files to … 把它加入 (它位于 node_modules /react-native-video/ios/ )
建立连接:在这里插入图片描述
将libRCTVideo.a ----> 加入到 Link Binary With Libraries
重新编译启动后如果报错 可以在github

<think>好的,用户现在问的是关于之前提到的定制化策略的变现价值以及如何实现。我需要先回顾一下之前的对话,用户是前端程序员,使用JavaScript,之前已经给出了一些结合跑步和技术的内容策略。现在用户关心的是这些策略能否赚钱,以及具体怎么操作。 首先,用户可能已经有一定的技术基础,希望通过自己的技能变现。他们可能想知道这些建议是否可行,有没有实际的商业价值。需要分析不同的变现方式,比如广告、赞助、付费内容、会员订阅等,并结合他们的前端技术能力。 接下来,用户的真实需求可能不仅仅是简单的变现方法,而是如何将技术能力与跑步内容结合,找到可持续的盈利模式。他们可能对技术实现和商业模式的结合比较感兴趣,比如如何利用API、数据可视化来吸引用户,再通过什么方式转化收入。 需要考虑到前端程序员的特点,可能更擅长开发工具、小程序、插件等,所以变现方式可以围绕这些技术产品展开。同时,用户提到的跑步内容,可以结合地理位置、数据故事化,所以可能的变现点包括定制内容、企业合作、数据服务等。 另外,用户可能没有考虑到长期运营和用户粘性的问题,所以在回答中需要提到如何分阶段实施,从免费内容到付费转化,再到企业级合作。同时,需要给出具体的例子,比如小程序卖跑步计划,或者为跑团开发定制工具,这样用户更容易理解。 还要注意技术实现的风险和可行性,比如使用Web Bluetooth API接入设备数据,可能需要考虑兼容性和用户隐私问题。同时,数据安全和合规性也是需要考虑的点,比如处理用户数据时需要符合相关法律法规。 最后,总结几种可行的变现路径,并给出执行步骤,帮助用户从易到难逐步实施,这样他们可以根据自身情况选择合适的策略。可能还需要提醒用户测试市场反应,通过小规模试点验证模式,再扩大规模,降低风险。以下是</think>针对前端程序员身份与跑步内容相结合的变现体系设计,包含**技术实现路径**与**商业转化策略**的完整方案: --- ### 一、变现价值逻辑树 **核心公式**: `程序员+跑步IP变现 = 数据资产化 × 技术稀缺性 × 场景化服务` **价值支点**: - **技术门槛**:地理围栏/WebGL可视化等能力过滤90%传统跑步博主 - **数据资产**:持续积累的**城市跑步数据库**(含GPS轨迹/环境参数/体能数据) - **场景独占**:程序员视角的「技术解读跑步」内容形态 --- ### 二、三层变现体系与实现方案 #### **1. C端用户变现(轻量级技术实现)** | 变现形式 | 技术方案 | 案例场景 | |--| | **小程序付费功能** | Taro+云开发 | 3元解锁「AI步频分析」:用TensorFlow.js检测跑步视频并标注动作缺陷 | | **虚拟商品** | Web3D+区块链 | 发售数字藏品:成都环城绿道NFT纪念勋章(Three.js生成动态3D模型) | | **订阅制内容** | 用Puppeteer自动化生成 | 9.9元/月推送「程序员跑步周报」含:<br>- 本周代码性能优化vs跑步配速对比图 | | **互动广告** | 地理围栏+AR | 用户跑到春熙路时,通过WebAR触发运动品牌广告(按CPA结算) | **技术关键点**: ```javascript // WebAR广告触发逻辑 if (geolocation.inRange(品牌坐标)) { const arSession = await navigator.xr.requestSession(&#39;immersive-ar&#39;); // 加载品牌3D模型 loadBrandModel().then(model => { scene.add(model); // 用户注视3秒后记录有效曝光 eyeTracking.startDetection(); }); } ``` --- #### **2. B端企业变现(中台化解决方案)** | 合作方向 | 技术架构 | 报价模型 | |--|------------------------------|-------------------------| | **城市文旅项目** | 地图SDK+Cesium.js | 按城市地标数量阶梯收费 | | **运动品牌** | WebGL+实时数据大屏 | 线下活动H5按UV结算 | | **智能硬件厂商** | 设备SDK+数据中台 | 预装费+年度维护费 | | **赛事运营方** | Three.js赛事模拟系统 | 每场次定制开发 | **实施案例**: 为成都马拉松开发「**AI赛道透视镜**」微信小程序: - **技术栈**:TensorFlow.js姿势识别 + WebGL赛道建模 - **功能**:跑者用手机扫描参赛号码布即可查看: ```javascript // 实时显示赛道难度分析 const difficulty = await calculateSlope(gpsData); ctx.fillText(`程序员提醒:3KM后爬升相当于遍历10万条数据`, x, y); ``` - **报价**:基础版5万/年(含3次版本迭代) --- #### **3. 开发者生态变现(技术杠杆)** | 产品形态 | 技术包装策略 | 盈利模式 | |--------------|-----------------------| | **开源项目** | 封装SDK组件 | 付费高级功能模块 | | **技术课程** | 场景化案例教学 | 慕课平台分成 | | **插件市场** | 开发跑步专用Three.js插件 | 下载量分成 | | **数据接口** | 清洗跑步数据库生成API | 按调用次数收费 | **实施示例**: 开发「**RunData-Vis**」可视化插件: ```javascript // 核心卖点代码 class RunningVisualizer { constructor(data) { this._convertGarminToGeoJSON(data); // 私有方法处理原始数据 } // 暴露API:生成3D轨迹线 create3DLine(scene, config) { const line = new THREE.Line(geometry, material); scene.add(line); // 专利技术:根据配速自动调整线条粗细 this._applySpeedMapping(line); } } ``` **定价策略**: - 基础版免费(含广告) - 付费版¥599/永久授权(GitHub Sponsor专属) --- ### 三、分阶段实施路径 1. **冷启动期(0-3个月)** - 用Node.js开发「**跑步代码翻译器**」:输入配速/步频自动生成程序员梗图 - 小红书挂载「微信表情包商店」链接(技术跑者专属表情包) 2. **增长期(3-6个月)** - 上线「程序员跑者」微信小程序: - 核心功能:步频音乐生成器(Web Audio API实时匹配BPM) - 变现点:¥6.6解锁周杰伦歌曲BPM适配 - 与Keep等App合作开发「**代码主题跑步课程**」 3. **成熟期(6-12个月)** - 申请「运动数据可视化」相关专利 - 开发企业级SDK: ```javascript // 企业定制化接入示例 import { ChengduMarathonSDK } from &#39;@coderunner/sdk&#39;; const SDK = new ChengduMarathonSDK({ authKey: &#39;企业密钥&#39;, features: [&#39;3D建模&#39;, &#39;实时天气影响模拟&#39;] }); ``` --- ### 四、风险控制与合规要点 1. **数据安全** - 使用Web Crypto API加密用户GPS数据: ```javascript const encryptedData = await crypto.subtle.encrypt( { name: "AES-GCM" }, key, new TextEncoder().encode(用户数据) ); ``` 2. **法律合规** - 跑步NFT需申请「网络文化经营许可证」 - 企业合作采用「SaaS系统+本地化部署」双模式规避数据风险 3. **技术护城河** - 在Three.js渲染引擎中植入特定算法(如跑步轨迹抗锯齿专利算法) - 通过WebAssembly保护核心代码逻辑 --- 需要更具体的某类变现模式技术实现细节或商业模型测算,可进一步说明方向 ✨
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值