用的还是微信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

首先来说按文档配置相关隐私协议 https://ask.dcloud.net.cn/article/39073
我是用的HX3.2.3进行打包的，点击manifest.json=》APP启动页面配置+》使用原生隐私政策提示框，勾选后会在项目中自动添加androidPrivacy.json文件
注意！androidPrivacy.json不要添加注释，会影响隐私政策提示框的显示！！
androidPrivacy.json文件如下：
{
"version": "1", （这里个人建议和应用同步更新版本号，因为每次你更新应用后都需要更新版本号）
"prompt": "template",
"title": "服务协议和隐私政策",
"message": "　　请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。<br/>　　你可阅读<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>了解详细信息。如果你同意，请点击下面按钮开始接受我们的服务。",
"buttonAccept": "同意并接受",
"buttonRefuse": "暂不同意",
"second": {
"title": "确认提示",
"message": "　　进入应用前，你需先同意<a href=\"\">《服务协议》</a>和<a href=\"\">《隐私政策》</a>，否则将退出应用。",
"buttonAccept": "同意并继续",
"buttonRefuse": "退出应用"
},
"styles": {
"backgroundColor": "#00FF00",
"borderRadius":"5px",
"title": {
"color": "#ff00ff"
},
"buttonAccept": {
"color": "#ffff00"
},
"buttonRefuse": {
"color": "#00ffff"
}
}
}
message中的巨坑来了！！！划重点，一定一定一定（重要的事情说三遍）要注意这里，不然坑到你哭。
一定一定一定要将“/”做转义，例如：<a href=\"https:\/\/www.baidu.com\/\">（简直坑死人不偿命）普通的“/”就需要转义成“\/”，如果最后是以.html结束的后面不需要转义了，等下看截图。
系统给的背景颜色和按钮颜色，自己想改就改。
最后如果自定义基座调试运行没得弹窗，不要紧！！！安心的打个包，试一下就好了。
欢迎大家给与建议和更好的体验，我也是第一次用HX写APP。如果对你有帮助，记得一键三连。

plusReady(){  
                // 在这里调用plus api    
                var CallLog = plus.android.importClass("android.provider.CallLog");  
                var main = plus.android.runtimeMainActivity();  
                var obj = main.getContentResolver();  
                plus.android.importClass(obj);  

                var selection = {  
                    mobile: '',  
                    startTime: new Date('2021-9-1').getTime(),  
                    endTime: new Date('2021-9-16').getTime(),  
                    type: ''  
                }  
                //查询  
                var sql = '';  
                var keyword = '';    
                for (let item of Object.keys(selection)) {    
                    if (selection[item] != '') {    
                        switch (item) {    
                            case 'mobile':    
                                sql = sql == '' ? sql : sql + ' and ';    
                                sql = sql + CallLog.Calls.NUMBER + " like '%" + selection[item] + "%'";    
                                keyword = selection[item];    
                                break;    
                            case 'startTime':    
                                sql = sql == '' ? sql : sql + ' and ';    
                                sql = sql + CallLog.Calls.DATE + '>=' + selection[item];    
                                break;    
                            case 'endTime':    
                                sql = sql == '' ? sql : sql + ' and ';    
                                sql = sql + CallLog.Calls.DATE + '<=' + selection[item];    
                                break;    
                            case 'type':    
                                sql = sql == '' ? sql : sql + ' and ';    
                                sql = sql + CallLog.Calls.TYPE + '=' + selection[item];    
                                break;    
                        }    
                    }    
                }    
                sql = sql != '' ? sql : null;    

                var cursor = obj.query(  
                    CallLog.Calls.CONTENT_URI,  
                    null,   
                    sql,   //传入条件  
                    null,   
                    null  
                );  
                plus.android.importClass(cursor);  
                var content = []; // 用来存储数据  
                var count = 0; // 记录多少条  
                if (cursor.moveToFirst()) {  
                    while (cursor.moveToNext()) {  
                        count++;  
                        //号码  
                        var number = cursor.getString(cursor.getColumnIndex(CallLog.Calls.NUMBER));  
                        //呼叫类型  
                        var type;  
                        switch (  
                            parseInt(cursor.getString(cursor.getColumnIndex(CallLog.Calls.TYPE))))  
                        // 判断通话类型  
                        {  
                            case CallLog.Calls.INCOMING_TYPE:  
                                type = "呼入";  
                                break;  
                            case CallLog.Calls.OUTGOING_TYPE:  
                                type = "呼出";  
                                break;  
                            case CallLog.Calls.MISSED_TYPE:  
                                type = "未接";  
                                break;  
                            default:  
                                type = "挂断"; //应该是挂断.根据我手机类型判断出的  
                                break;  
                        }  
                        // 获取时间  
                        var date = new Date(parseInt(  
                            cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.DATE))));  
                        // 联系人  
                        var Name_Col = cursor.getColumnIndexOrThrow(CallLog.Calls.CACHED_NAME);  
                        var name = cursor.getString(Name_Col);  
                        // 号码归属地 返回：北京 联通  
                        var numberLocation = cursor.getString(  
                            cursor.getColumnIndex(CallLog.Calls.GEOCODED_LOCATION)  
                        );  
                        //通话时间,单位:s  
                        var Duration_Col = cursor.getColumnIndexOrThrow(CallLog.Calls.DURATION);  
                        var duration = cursor.getString(Duration_Col);  
                        // 存入数组   
                        content.push({  
                            name: name, // 联系人的姓名  
                            mobile: number, // 联系人电话  
                            numberLocation: numberLocation, // 号码的归属地  
                            // callTime: new Date().getTime(date), // 呼入或呼出时间  
                            callTime: this.formatDate(date),  // 呼入或呼出时间  
                            talkTime: duration, // 通话时长  
                            type: type  
                        });  
                        // 查询50条 就跳出  
                        // if (count > 50) {  
                        //  break;  
                        // }  
                    }  
                }  
                console.log(JSON.stringify(content));  
                this.tapeList = content  
            },