删除

uni-app的产品经理喜欢拿uni-app和rn以及flutter比较，社区里也有一篇：
https://ask.dcloud.net.cn/article/36083

其实对于开发者来讲根本是不同的东西。
对标rn的是weex，weex以前被阿里扔到apache没人管，现在好像又回到阿里那边维护了，但还是不上心，没有rn社区那种活跃。
对标flutter的是...目前还没有。

weex的不活跃也直接导致了uni-app的nvue案例或者nvue ui项目很少。

国外更接近uni-app的产品架构的是quasar framework。同样的基于vue，同样的自带ui框架。uni-app的优点就是国内各平台小程序支持，多了个weex编译，还有插件市场可以用，其他都落后。

quasar 在国内用的很少，如果要后端，后端用的是firebase插件，firebase同样没有对手，不过因为集成了一大堆谷歌服务，国内并不能用。
而且firebase这个理念和云计算的serverless又不太一样，等于是把所有的后端服务都集中优化了，和分开的云函数，云数据库，云存储比更省心。而且现在阿里云这边这三个云产品相互访问还都是通过外网，速度慢，动不动就报错。腾讯云这边仗着小程序的流量还急着收费。

uni-app良心的地方挺良心，腾讯云，阿里云的资源没怎么加价卖，也是为数不多的国内开源项目的小公司。不过uni-ad广告那一层网上有传闻是抽成而且不公开的，自己调用广告联盟会被报非法应用。这个问题吧，我觉得dcloud愿意公开讲清楚我别的都给你免费用，就广告里面抽多少%，我觉得也没什么大不了的，就像epic的虚幻引擎那样。不然刚开始我都怀疑dcloud到底该怎么样变现养活自己的。

国内有另外一家开源的小公司叫edusoho，专做教育培训的开源项目，他们的盈利方式是打包云服务卖，当然云服务相关的源代码是不开源的。现在也好好活着，而且依旧开源，我觉的这个比起暗暗的抽广告费要合理一些，既然都是阿里云，腾讯云的下游，自己的产品在集成的云服务上加点钱卖。

用的还是微信H5支付

<!-- nvue不支持span  解决方案  -->  
 <view class='reply'>  
        <view class='reply-detail'>  
              <text class="reply-detail-username" v-for="i in '刘芸'">{{i}}</text>  
             <text class="reply-detail-content" v-for='i in ":"'>{{i+'&nbsp;'}}</text>  
             <text  class="reply-detail-content" v-for='it in "都说JAVA开发很赚钱， 我苦心专研了两年，其中参加了不少的培训。"'>{{it}}</text>  
       </view>  
 </view>  

<style lang='scss'>  
     .reply {  
        width: 595upx;  
        min-height: 75upx;  
        margin: 15upx 30upx 0upx 124upx;  
        padding: 22upx 24upx;  
        background-color: #F4F4F4;  
        border-radius: 4upx;  
      }  

     .reply-detail {  
        font-size: 29upx;  
        line-height: 48upx;  
        display: flex;  
        flex-direction: row;  
        color: #343434;  
        flex-wrap: wrap;  
       >.reply-detail-username{  
           color: #2199D1;  
       }  
       >.reply-detail-content{}  
    }  
   </style>

完美解决nvue中的文字无法嵌套

vue-inset-loader

编译阶段在sfc模板指定位置插入自定义内容，适用于webpack构建的vue应用，常用于小程序需要全局引入组件的场景。（由于小程序没有开放根标签，没有办法在根标签下追加全局标签，所以要使用组件必须在当前页面引入组件标签）

github：https://github.com/1977474741/vue-inset-loader
用得上顺便点个star

第一步 安装

npm install vue-inset-loader --save-dev  

第二步 vue.config.js注入loader

module: {  
    rules: [  
      {  
        test: /\.vue$/,  
        use:{  
            loader: "vue-inset-loader"  
            // // 针对Hbuilder工具创建的uni-app项目  
            // loader: path.resolve(__dirname,"./node_modules/vue-inset-loader")  
        }  
      }  
    ]  
},  
// 支持自定义pages.json文件路径  
// options: {  
//     pagesPath: path.resolve(__dirname,'./src/pages.json')  
// }  

第三步 pages.json配置文件中添加insetLoader

"insetLoader": {  
    "config":{  
        "confirm": "<BaseConfirm ref='confirm'></BaseConfirm>",  
        "abc": "<BaseAbc ref='BaseAbc'></BaseAbc>"  
    },  
    // 全局配置  
    "label":["confirm"],  
    "rootEle":"div"  
},  
"pages": [  
    {  
        "path": "pages/tabbar/index/index",  
        "style": {  
            "navigationBarTitleText": "测试页面",  
            // 单独配置，用法跟全局配置一致，优先级高于全局  
            "label": ["confirm","abc"],  
            "rootEle":"div"  
        }  
    },  
]  

配置说明

• config (default: {})
  定义标签名称和内容的键值对
• label(default: [])
  需要全局引入的标签，打包后会在所有页面引入此标签

• rootEle(default: "div")
  根元素的标签类型，缺省值为div，支持正则，比如匹配任意标签 ".*"

  ✔ label 和 rootEle 支持在单独页面的style里配置，优先级高于全局配置

uniapp-to-group

uniapp-to-group 是 uni-app 开发字节小程序的时候，使用抖音团购模板的 webpack 转换插件
HBuilder X 同样适用，编辑器需要在 3.2.3.20210825 及以上

示例

HBuilder X 在项目跟目录添加一个 vue.config.js 文件

  npm i uniapp-to-group -D  
  or  
  yarn add uniapp-to-group -D

  // vue.config.js  
  const UniappToGroup = require('uniapp-to-group')  

  module.exports = {  
  configureWebpack: {  
    plugins: [  
      new UniappToGroup({  
        // 对应 package.json 中引入插件步骤  
        package: {  
          'ttPlugins': {  
            'dependencies': {  
              'poi-group-buy-plugin': {  
                'version': '1.0.0',  
                'isDynamic': true  
              }  
            }  
          }  
        },  
        app: {  
          'pages': [  
            // 手动配置商品插件中的商品详情页面  
            'ext://poi-group-buy-plugin/detail'  
          ],  
          'fallbackPluginPages': {  
            // 这里的 key 是小程序原来的商品详情页（下面只是示意），value 可以就用这个值  
            'product/detail/index': 'ext://poi-group-buy-plugin/detail'  
          }  
        }  
      })  
    ]  
  }  
}

应用换肤这个 “毫无卵用” 又浪费时间的的功能却是许多产品经理们喜欢玩的（某信国民应用都不做的功能）。

首先我坦白，我TM就从没用应用换皮这种功能，其次我 氪金 跟有没有换皮这个功能毫无关系，真是受够了这种沙雕产品，虽然我在产品经理提出这个需求之前已经解决了产品经理本人。但是在这里先解救一下正在受难中的卑微的程序员鄙视链底端的 web前端。

实现方式：CSS变量 + Vuex

具体的源码下载请前往我的 uni-app 插件主页下载

源码地址：https://ext.dcloud.net.cn/plugin?id=6215

在线体验：https://mydarling.gitee.io/uniapp-extend

效果预览

扫码预览 H5 版

我的博客原文：https://blog.csdn.net/u013350495/article/details/120343941

前端：uniapp
首页缓存、图片缓存、收藏缓存、阅读记录缓存；
后端：java springboot
redis缓存、knife4j(Swagger UI升级版)接口预览、webmagic小说数据爬取、支持TXT全本导入
管理系统：
vue2 全家桶框架管理系统

预览：

项目中遇到，研究一下，特此记录，不喜勿喷！

此方法适用于swiper图片宽度铺满屏幕，可根据需求自定义调整
原理：获取图片高度，根据图片宽高比例，取得swiper在宽度100vw情况下的高度，实现swiper高度根据内容图片高度适应

template：

...  
<swiper class="swiper"  :style="`height:${swiperheight}`">  
<swiper-item class="swiperitem" v-for="(item,index) in imgList" :key="index" >  
                </swiper-item>  
             </swiper>   
...  

js

export default {  
        data() {  
            return {  
                swiperheight:"0px",  
                imgList:[...]  

            }  
        },  
        onLoad() {  
            this.getswiperImageInfo()  
        },  
        methods: {  
            getswiperImageInfo(src){  
              uni.getImageInfo({  
                src: this.imgList[0].img,  
                success: (res) => {  
                  console.log(res)  
                  let endwidth = res.width/res.height  
                  this.swiperheight = 100/endwidth+"vw"  
                },  
                fail: (err) => {  
                  console.log(err)  
                }  
              });  
             }  

        }  
    }

css

.swiper{  
        width: 100vw;  
    }

最近在一个电脑上新安装了hbuilderX，下面是问题表现

• 新建了一个demo,点击内置浏览器运行就直接报错
  [Vue warn]: Unknown custom element: <App> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

• . 然后选择运行在微信开发者工具也会报错:
  ERROR TypeError: Cannot read property 'id' of undefined
  00:01:20.814 TypeError: Cannot read property 'id' of undefined
  00:01:20.818 at generateComponent (C:\Users\Administrator\Desktop\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\webpack-uni-mp-loader\lib\plugin\generate-component.js:71:110)

• 选择运行在真机上就会报无法独立运行此app的错误。

然后就非常奇怪，网上搜了很多例子，看到有一些人也跟我出现了同样的问题，但是都没有解决。新建任何demo运行都是这个错误，并没有人能够解决成功。
后来我试了各种方式都不行。这个demo也能够在正确的位置找到，这就奇了怪了。

试了各种网上说的奇怪的方法之后都没有效果，但是并没有放弃，我又新建了一个官方demo，突发奇想的把新建demo时候选择project的位置改了一下，改到了桌面上，这次一运行竟然神奇的成功了。

我个人推测可能是跟我使用过360的c盘搬家有关系，因为后来我看到hbuilder里面打印的log有360的某某路径指向了360的c盘搬家的位置（这个位置里面有Administrator的那个文件夹用来放用户文件的，而hbuilder默认创建项目的文件夹名字就是这个名字）。可能就是这样子，导致hbuilder运行项目的时候被指向了一个奇怪的路径，导致运行失败了。

开通条件

1.海外网络环境
2.Facebook账号(Facebook登录页面)

创建应用

1.打开Facebook开发者中心

2.点击右上角"我的应用"

3.进入应用管理界面，点击"创建应用"

4.根据需要选择应用产品的类型(应用类型详见"详细了解应用类型")，然后点击继续

5.填写应用信息

6.创建完成后即可获取应用的应用编号(即appID)

7.为应用添加登录功能

设置登录-iOS

1.我的应用--设置--基本，选择添加平台，选择iOS

2.填写信息保存即可

设置登录-Android

我的应用--设置--基本，选择添加平台

选择android平台，应用商店选择Google Play

填写必要的包名和散列信息，类名是固定的。如图

散列的获取方法，参考文档：
https://developers.facebook.com/docs/facebook-login/android 第六小节

如果获取到的散列位数不对，需要找台linux/mac 计算机。
使用下面的命令获取
keytool -exportcert -alias hbuilder -keystore ./HBuilder.keystore | openssl dgst -sha1 -binary | openssl base64

应用权限

使用Facebook登录需开启"public_profile"以及"email"的访问权限
点击"应用审核"-"权限和功能"，开启"public_profile"以及"email"的高级访问权限

暂未发布

前置条件

1 海外网络环境
2 Google账号

Android开通步骤

2.1 打开Google 登录引导页
网址： https://developers.google.com/identity/sign-in/android/sign-in?hl=zh-cn

2.2 选择项目配置

点击后出现项目与应用选择界面，
如果你有已创建过的Firebase项目，可以直接选择。
如果没有，可以选择新建一个Google Api 项目。

选择项目后，在该项目下新建一个应用
选择应用平台 android

需要填写应用的包名和sha1指纹
指纹的获取方法在界面上有提示。按照提示操作即可。

点击创建，即可完成开通步骤。

iOS开通步骤

3.1 打开Google登录iOS引导页
3.2 点击创建OAuth客户端ID，填写项目名称

3.3 选择iOS平台、填写BundleID后，点击CREATE，即可获取Client ID