本文以 H5 平台为基准，引入云闪付 jssdk，通过将uni-app发布到云闪付小程序，演示如何使用uni-app开发云闪付小程序。

扩展云闪付小程序平台

创建uni-app项目后，在项目根目录下新增或修改 package.json 自定义基座平台，在根节点下新增如下扩展配置：

    "uni-app": {    
        "scripts": {    
          "mp-unionpay": {  
                "title": "云闪付小程序",  
                "env": {  
                    "UNI_PLATFORM": "h5"  
                },  
                "define": {  
                    "MP-UNIONPAY": true  
                }  
            }  
        }    
    }

引入云闪付 jssdk

接入方使用云闪付 APP 小程序前端 API 前，需在调用页面（必须为 https ）引入插件 upsdk.js 文件，https://open.95516.com/s/open/js/upsdk.js。

在项目根目录增加或修改 template.h5.html 引入云闪付 jssdk ：

<script src="https://open.95516.com/s/open/js/upsdk.js"></script>

隐藏内置导航栏

在项目根目录 pages.json 隐藏内置导航栏

"pages": [  
        // pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages  
        {  
            "path": "pages/tabBar/component/component",  
            "style": {  
                "navigationStyle":"custom"//custom即取消默认的原生导航栏  
            }  
        },  
    ]

使用 jssdk 设置导航栏

upsdk.js 引入后需在页面使用 upsdk.pluginReady 进行 sdk 初始化，前端接口的调用建议在其回调函数中使用。

在 pages/tabBar/component/component.vue 页面使用 jssdk 设置导航栏样式和标题：

    onLoad() {  
        // #ifdef MP-UNIONPAY  
        upsdk.pluginReady(function() {  
            // 前端API调用     
            upsdk.setTitleStyle({  
                // 可选，导航栏(含状态栏)背景色及透明度。16进制，前2位(8F)透明度，后六位(FFFFFF)颜色，仅对当前页有效，其余页还是申请配置的导航默认颜色  
                navBackgroundColor: '0x8FFFFFFF',  
                appletStyle: 'black', //可选，black-黑色主题，white-白色主题  
                backBtnVisible: '0', // 可选，左侧返回按钮是否显示。'0'不显示，'1'显示，不传或空则默认显示  
                appletTitleBarVisible: '1', // 可选，标题栏是否显示。'0'不显示，'1'显示，默认显示  
                appletTitleGradientOrient: 'top', // 可选，渐变色方向，支持top、bottom、left、right  
                appletTitleGradientStartColor: '0x8FFFFFFF', //渐变起始颜色  
                appletTitleGradientEndColor: '0x88888888' //渐变结束颜色  
            });  
            //设置导航栏标题，居中显示。  
            upsdk.setNavigationBarTitle({  
               title: '设置云闪付标题'  
            });  
        });  
        // #endif  
    },

运行到云闪付小程序

HBuilderX 会根据 package.json 的扩展配置，在运行菜单下，生成云闪付小程序菜单，如下图：

点击云闪付小程序菜单，运行到h5

发行云闪付小程序

同样，HBuilderX 会根据 package.json 的扩展配置，在发行 -> 自定义发行菜单下，生成云闪付小程序菜单，如下图：

详见云闪付小程序官方文档

这几天开始接触uniapp开发，发现官方demo安卓端点击app图标到显示启动页（Hbuildx图标页）会卡个1-2秒
明显比原生app体验差很多，作为一个强迫症，这点当然是不能忍的。具体问题详情查看以下链接：
https://ask.dcloud.net.cn/question/133649

先说下大概为什么卡顿的原因，我也不太明白，我猜是因为启动安卓app时需要启动webview或者weex等底层引擎导致的卡顿。（这个问题望官方的人可以解答一下，我看了PandoraEntry的源码也没有找到答案）

下面说一下优化原理，就是用原生安卓代码先启动一个页面，然后在该页面中再启动uni的主activity（PandoraEntry）
这样，点击app图标后，就跟原生一样会立马显示我们原生开发的第一个页面（而不会卡个1、2秒才显示界面，让人感觉以为自己没点击图标成功）

下面说下流程

一、在AS中新建一个empty activity：菜单file->new->activity->empty activity。
界面xml代码：

<?xml version="1.0" encoding="utf-8"?>  
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.xiefeng.MainActivity">  

</androidx.constraintlayout.widget.ConstraintLayout>

没什么东西，就是一个空白页面

java代码如下：

package com.xiefeng;  

import androidx.appcompat.app.AppCompatActivity;  

import android.content.Intent;  
import android.os.Bundle;  

import com.android.simple.R;  

import io.dcloud.PandoraEntry;  

public class MainActivity extends AppCompatActivity {  

    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  

        Thread myThread=new Thread(){//创建子线程，启动uni的主activity  
            @Override  
            public void run() {  
                try{  
                    sleep(1000);//使程序休眠五秒  
                    Intent it=new Intent(MainActivity.this, PandoraEntry.class);//启动MainActivity  
                    startActivity(it);  
                    finish();//关闭当前活动  
                }catch (Exception e){  
                    e.printStackTrace();  
                }  
            }  
        };  
        myThread.start();//启动线程  
    }  
}

二、AndroidManifest.xml修改：
1、在android节点加上主题android:theme="@style/AppTheme2"
2、新增我们自定义的activity并设为main
3、将uni的主activity的main注释掉

完整代码如下：

<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    package="com.android.simple">  

    <application  
        android:allowBackup="true"  
        android:allowClearUserData="true"  
        android:icon="@drawable/icon"  
        android:label="@string/app_name"  
        android:largeHeap="true"  
        android:supportsRtl="true"  
        android:theme="@style/AppTheme2">  

        <activity android:name="com.xiefeng.MainActivity">  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
        </activity>  

        <activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"  
            android:hardwareAccelerated="true"  
            android:label="@string/app_name"  
            android:launchMode="singleTask"  
            android:screenOrientation="user"  
            android:theme="@style/TranslucentTheme"  
            android:windowSoftInputMode="adjustResize">  
            <!--<intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
            -->  
        </activity>  
        <activity  
            android:name="io.dcloud.PandoraEntryActivity"  
            android:configChanges="orientation|keyboardHidden|screenSize|mcc|mnc|fontScale|keyboard|smallestScreenSize|screenLayout|screenSize"  
            android:hardwareAccelerated="true"  
            android:launchMode="singleTask"  
            android:permission="com.miui.securitycenter.permission.AppPermissionsEditor"  
            android:screenOrientation="user"  
            android:theme="@style/DCloudTheme"  
            android:windowSoftInputMode="adjustResize">  
            <intent-filter>  
                <category android:name="android.intent.category.DEFAULT" />  
                <category android:name="android.intent.category.BROWSABLE" />  

                <action android:name="android.intent.action.VIEW" />  

                <data android:scheme="h56131bcf" />  
            </intent-filter>  
        </activity>  

        <provider  
            android:name="io.dcloud.common.util.DCloud_FileProvider"  
            android:authorities="com.android.simple.dc.fileprovider"  
            android:exported="false"  
            android:grantUriPermissions="true">  
            <meta-data  
                android:name="android.support.FILE_PROVIDER_PATHS"  
                android:resource="@xml/dcloud_file_provider" />  
        </provider>  

        <meta-data  
            android:name="dcloud_appkey"  
            android:value="69ae588821d34380d31b94dd33dc0689" />  
    </application>  

</manifest>

三、最后在values/styles.xml加上主题：

<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">  
        <item name="android:windowFullscreen">true</item>  
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>  
        <item name="android:windowDrawsSystemBarBackgrounds">false</item>  
        <item name="colorPrimary">#6200EE</item>  
        <item name="colorPrimaryDark">#6200EE</item>  
        <item name="colorAccent">#6200EE</item>  
    </style>

如果要加上自己的启动图片，可以加上节点：<item name="android:windowBackground">@drawable/splash</item>，并把图片放到drawable文件夹下。
建议原生启动图和Hbuildx设置的启动图为同一张，这样两张启动图无缝对接，体验比较好。
（注：加上启动图后启动会更慢个0.1秒不知道为什么，希望大神们解答一下）

完毕。

我这两天在用uniapp写小程序，因为需求要横向是滚动的，所以我用了swiper轮播来实现滚动

但是我发现这个轮播的高度是定死的，如果你下面有列表那么就会超出隐藏，经过了一天的折磨之后

终于想到了解决办法！

我看网上都是什么动态获取他的高度啊之类的，我觉得太麻烦所以就这样做了

我先是发现他的所有swiper-item里面都有一个overflow: hidden;(超出隐藏)然后我给他用overflow: auto;给顶掉了
然后我发现虽然说高度没变，但是里面的内容已经可以向下滚动了，拿这不就简单多了，我直接给外面盒子的150px的默认高度给改成100vh了，完美解决

全栈工程师，做过的产品涉及过的行业都很丰富，掌握的技术很多，前后端都可，网站、APP、小程序多端；原生、混合、第三方框架多形式等都可，uniapp原生插件也可，有需要的联系vx：Chen-Taurus-0510

Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):
万万没想到，报错是因为//#ifdef 条件编译出了问题，除了//#ifdef 和 //endif没有成对出现外，还有什么//#ifdef 之后有其他文本，//#ifdef之后有注释文本，具体见下文：
第一行 Module build failed 报错内容是一样的，具体区别注意第二行之后的。
1、没有成对出现：

            //条件编译报错测试  
            test(){  
                //#ifdef MP-WEIXIN  
                uni.showToast({  
                    title:"测试代码",  
                    icon:"none"  
                })  

            },

区别：Error: Unbalanced delimiter found in string
这句翻译下是说“在字符串中找到不平衡的分隔符”，基本猜猜也能找到错误。

 Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):  
 Error: Unbalanced delimiter found in string  
     at Function.XRegExp.matchRecursive (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\xregexp\lib\addons\matchrecursive.js:186:23)  
     at matchReplacePass (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:303:27)  
     at replaceRecursive (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:333:10)  
     at preprocessor (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:168:10)

2、//#ifdef 后面有文本

            //条件编译报错测试  
            test(){  
                //#ifdef MP-WEIXIN 小程序执行  
                uni.showToast({  
                    title:"测试代码",  
                    icon:"none"  
                })  
                //#endif  
            },

区别：SyntaxError: Unexpected identifier
这里翻译下说是“意外的标识符”，当时顺手在后面加了个注释，一直报错，差点重装，是挺意外的，编译器要是报个错在哪一行也还好啊。。。

 Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):  
 SyntaxError: Unexpected identifier  
     at new Function (<anonymous>)  
     at getTestTemplate (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:375:10)  
     at testPasses (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:379:16)

3、//#ifdef 后面有注释

            //条件编译报错测试  
            test(){  
                //#ifdef MP-WEIXIN //小程序执行  
                uni.showToast({  
                    title:"测试代码",  
                    icon:"none"  
                })  
                //#endif  
            },

区别：SyntaxError: Unexpected token '}'
习惯在代码后面紧接着写注释的要小心了，//#ifdef 后前外别写。给你报个“}”的错，这下你去找“{ }”吧，越找越迷茫。

 Module build failed (from ./node_modules/@dcloudio/webpack-uni-mp-loader/lib/script.js):  
 SyntaxError: Unexpected token '}'  
     at new Function (<anonymous>)  
     at getTestTemplate (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\webpack-preprocess-loader\preprocess\lib\preprocess.js:375:10)  
     at testPasses (F:\HbuilderX\HBuilderX.3.2.9.20210927.full\HBuilderX\plugins\uniapp-cli\node

想使用sass方式写个css，由于命名为style.sass,结果出现了上面的提示，所以记录下来。

查网络得来的解决方法是命名错误，要命名style.scss, 即你的文件后缀要为scss，就可以scss编译！

看了幾天官方教學,
都不看得太懂
所以特地分享個影片教學:
https://www.bilibili.com/video/BV13V411H7W2?from=search&seid=6151344640479104846&spm_id_from=333.337.0.0

HBuilder X 3.2.12 版本 点击运行 > 运行到终端 > 1. npm run dev 不运行 自动关闭HBuilder X 更新前还正常可以运行 刚更新完 点击运行 就出现这个问题

https://ext.dcloud.net.cn/plugin?id=2284
这个插件是他的，这是一个骗子，加了他QQ问我收了300块钱，这个模板里边小说接口失效了，我说找他付费更新下，他说过每个接口150，前端首页这里帮我对接好，我需要写三个接口，一个是首页男生推荐列表，一个是首页女生推荐列表，一个是搜索页的，一共是450，觉得是dcloud的可信，我先给他转了300，说1天可以帮忙弄好。结果他一直说有事，弄了2-3天才说弄完，但是首页列表没有图片，搜索页也搜索不出数据，他说那是另外的接口了，还需要付费，然后再写就不帮前端对接了。

uniapp最新的3.2.12.20211029，苹果虚拟支付返回的receipt有问题，验证receipt一直报错21003 receipt无法通过验证。这是个比较严重的BUG，希望尽快修复，我回退了一个版本才解决

【阿里云】双11爆款优惠特价服务器
1核2G1M 180元/3年
2核2G5M 58元/1年
2核4G5M 600元/3年
4核8G5M 1500/3年
活动地址：
https://www.aliyun.com/minisite/goods?taskPkg=1111ydsrwb&pkgSid=5985&userCode=wbqjs7bw

【腾讯云】双11爆款优惠特价服务器
1核2G5M 50G云盘，50元/1年
2核4G8M 80G云盘，74元/1年
2核4G3M 50G云盘，968元/3年（16:00开抢）
4核8G5M 50G云盘，818元/1年（19:00开抢）
活动地址：
https://curl.qcloud.com/mMBBtBDp

<list id="list0">  
 <swiper>  
<swiper-item>  
<list id="list1" >  
<cell>内部不能有空的cell标签，如果有list1在内容滚动到顶部后list0无法联动 </cell>  
</list>  
</swiper-item>  
</swiper>  
</list>