崮生的 uni-app 最佳实践

代码仓库

tailwindcss

！ 值得注意的是微信小程序并不支持一些 CSS 选择器还有他的 wxss 不支持 \ 所以如果直接使用 tailwindcss 会报错类似于图中这样的错 :

• 幸运的是 tailwindcss 支持自定义 separator
• 但是在类名中包含 . 的又需要 \. 这样的形式去声明类名而且貌似没有办法自定义这个， 所以在这种情况下我复制了 'tailwindcss/defaultConfig' 中的配置将 \ 全部改成了 _
• 这种语法 wxss 也不支持.... 这里不是 CSS 类名修改可以避免的，就只能去corePlugins禁用相关的插件
  • 禁用了 space divideWidth divideStyle divideOpacity
• CSS 的类名是允许以数字开头的，但需要进行转义，而 screens 配置中有一个 2xl 这个 key 会在类名的最前面出现，于是 tailwind 转义为 \32xl 这里就又有了 \ 所以这里也需要 改一下
• 本 demo 对 tailwind 进行了如上定制，所以在使用的时候需要注意这些点
  • 建议使用这里 tailwindcss 类名提示 链接中的插件

效果

相关 commit 记录

• 引入 tailwindcss 并在 微信开发者工具中正常跑起来的改动 b3c7085
• refactor(tailwind): 更好的配置文件
• fix(tailwind): 加回响应式配置

by 崮生 from 崮生 • 一些随笔,欢迎 赞助本文
本文欢迎分享与聚合，全文转载未经授权（ 联系我）不许可。

神仙散棒槌

年前下单，年后开工，享受满减优惠，
5k-1k，1w-2k，2w-4k，以此类推，

承接UI、H5、小程序、、PC端网站、后台系统等产品

vx：web9688

最近公司有一个push的需求，于是开始研究如何着手push。
UniPush开通指南 - DCloud问答 https://ask.dcloud.net.cn/article/35716
UniPush使用指南 - DCloud问答 https://ask.dcloud.net.cn/article/35622
Unipush常见问题 - DCloud问答 https://ask.dcloud.net.cn/article/36611
Push推送开发指南 - DCloud问答 https://ask.dcloud.net.cn/article/34
android离线打包指南-https://nativesupport.dcloud.net.cn/AppDocs/usemodule/androidModuleConfig/push?id=unipush
我的项目是html5+用android离线打包。
unipush是结合各大第三方推送的推送插件，所以只需要看android离线打包指南中的unipush或个推即可，切记不要看个推官网api，我就踩坑了。
我的android离线打包SDK因为是19年年初下载的，所以没有unipush推送包，需要从新的android离线SDK中复制一个aps-unipush-release.aar
并且按照指示配置相关配置。如果你遇到的情况是：
java.lang.UnsatisfiedLinkError: dalvik.system.PathClassLoader[DexPathList[[zip file "/data/app/com.tomorrow.vs-8D5K3eSp_JmeMn1E4-jzdA==/base.apk"],nativeLibraryDirectories=[/data/app/com.tomorrow.vs-8D5K3eSp_JmeMn1E4-jzdA==/lib/arm64, /data/app/com.tomorrow.vs-8D5K3eSp_JmeMn1E4-jzdA==/base.apk!/lib/arm64-v8a, /system/lib64, /product/lib64]]] couldn't find "libmsec.so"
那就需要在build.gradle中加上
android {
ndk {
// 设置支持的SO库架构
abiFilters 'x86','armeabi-v7a'
}
}
}
tips:
1.尝试使用个推官网api配置，踩坑！

2. 尝试使用unipush，从新版android离线SDK复制unipush包，包冲突，需要删除其他推送包，只保留2个即可。编译通过，打开app失败，上文错误，踩坑。
3. 尝试使用html5+的个推，按照文档配置后cid获取不到，踩坑！
4. 后续遇到任何问题，我还会继续补充。

Q: uni-app 标准基座调试时，可以收到推送消息，打包之后收不到

A:
uni-app 标准基座使用的是 HBuilder基座的应用信息
打包使用的是 开发者自己的应用信息。

开发者需要开通按照手册开通 unipush功能，以及相关厂商配置

Q:uni-app 自定义基座调试时，可以收到推送消息，打包之后收不到

A:
自定义基座的应用信息，与打包应用信息是一致的。
如果自定义基座可以收到消息，打包之后无法收到。 大概率是打包过程中的 包名/签名配置错误导致。

环境:
电脑系统win10,手机ios14.3

  解决办法:使用管理员权限运行HBuilder

let cacheMap =  new Map()  
let timeoutDefault = 86400 // 设置默认超时时间，单位秒 3600*24  

function isTimeout (name) {  
  const data = cacheMap.get(name)  
  if (!data) return true  
  if (data.timeout === 0) return false   
  const currentTime = Date.now()  
  const overTime = (currentTime - data.createTime) / 1000  
  if (overTime > data.timeout) {  
    cacheMap.delete(name)  
    if (name.startsWith('_')) {  
      try {  
        uni.removeStorageSync(name)  
      } catch (e) {  
        console.log(e)  
      }  
    }  
    return true  
  }  
  return false  
}  

class CacheCell {  
  constructor (data, timeout) {  
    this.data = data  
    this.timeout = timeout // 设置超时时间，单位秒  
    this.createTime = Date.now() // 对象创建时候的时间  
  }  
}  

class MinCache {  
  constructor (timeout) {  
    try {  
      const res = uni.getStorageInfoSync()  
      res.keys.forEach(name => {  
        try {  
          const value = uni.getStorageSync(name)  
          cacheMap.set(name, value)  
        } catch (e) {  
          console.log(e)  
        }  
      })  
    } catch (e) {  
      console.log(e)  
    }  
    timeoutDefault = timeout  
  }  

  /**  
   * 设置缓存数据  
   * @param {Any} name 缓存的key, 以下划线命名表示永久缓存到Storage  
   * @param {Any} data 缓存的数据  
   * @param {Number} timeout 缓存时间（秒），默认86400秒即一天，0表示永久缓存  
   */  
  set (name, data, timeout = timeoutDefault) {  
    const cachecell = new CacheCell(data, timeout)  
    let cache = null  
    if (name.startsWith('_')) {  
      try {  
        uni.setStorageSync(name, cachecell)  
        cache = cacheMap.set(name, cachecell)  
      } catch (e) {  
        console.log(e)  
      }  
    } else {  
      cache = cacheMap.set(name, cachecell)  
    }  
    return cache  
  }  
  get (name) {  
    return isTimeout(name) ? null : cacheMap.get(name).data  
  }  
  delete (name) {  
    let value = false  
    if (name.startsWith('_')) {  
      try {  
        uni.removeStorageSync(name)  
        value = cacheMap.delete(name)  
      } catch (e) {  
        console.log(e)  
      }  
    } else {  
      value = cacheMap.delete(name)  
    }  
    return value  
  }  
  has (name) {  
    return !isTimeout(name)  
  }  
  clear () {  
    let value = false  
    try {  
      uni.clearStorageSync()  
      cacheMap.clear()  
      value = true  
    } catch (e) {  
      console.log(e)  
    }  
    return value  
  }  
}  

MinCache.install = function (Vue, {timeout = 86400} = {}) {  
  Vue.prototype.$cache = new MinCache(timeout)  
}  

export default MinCache

// 注册缓存器  
Vue.use(MinCache)

使用方法
this.$cache.set('name', '值')

原文链接
https://juejin.cn/post/6844903870448009223

1、申请苹果开发者账号（点此查看苹果开发者账号申请教程）

2、使用官方Hbuilder X打包出iOS App，建议勾选上代码原生混淆

3、使用官方工具，application loader上传IPA包至App Store构建，需要application loader安装包的，可以联系我：

QQ：1481983952，专业App代上架

4、填写iOS App资料，比如，logo，预览图，描述，关键词，定价，隐私政策，等等

5、提交审核，审核一般情况是当天晚上审核，凌晨出结果，审核团队在美国，时差不一样

6、如果被拒，根据苹果团队返回的guideline，可以制定修改计划

7、对于那些业务模式本身有问题的，比如金融App、游戏租号App、色情App等App Store不允许存在的App，建议使用马甲上架，uni-app制作马甲还是挺简单的，分为过审

面和提审面

8、如果对于uni-app上架苹果商店审核有任何疑问的，或者审核被拒的，需要特殊渠道上架的，可以联系我：

QQ：1481983952，专业App代上架

QQ：1481983952，专业App代上架

真是可惜呀：DCloud开发者开放平台仅支持企业实名认证呢！

搜到了这个问题https://ask.dcloud.net.cn/question/113870，发现跟他的情况一样，特来分享一下。

我是用IOS离线真机调试的，Xcode下报错。
[JS Framework] 当前运行的基座不包含原生插件[mapSearch]，请在manifest中配置该插件，重新制作包括该原生插件的自定义运行基座

我就纳闷了，明明只用了一个openLocation，不涉及nvue啊。
于是，使用官方的云打包试了一下，发现没有问题。

怀疑是基座问题，用了hello-uniapp-master测试了一下openLocation，发现也有这个问题。
没办法，只有一步一步排查。

我一想，安卓下没这个问题，但是IOS下，缺调用了mapSearch。
我尝试把高德地图nvue的几个类库放进去，主要是多了libDCUniMap.a、libDCUniAmap.a

这时，奇迹般地发现报错改了。
[NetworkInfo] Could not successfully update network info for descriptor
网络没权限？百度了一下，把debug改成了false。

继续测试，又报一个错误，也看不懂，但是看了一下Xcode的报错，发现调用了百度地图，DCMap
我在想，明明只引用了一个高德地图，怎么会去调百度呢。

这时看了一下类库，有一个libDCUniBmap.a，搜了一下，竟然搜不到，看名字像百度的，果断删除。
最后把plist里面，LSApplicationQueriesSchemes里面跟baidu有关的都删除。

最后，IOS下地图显示出来了。

综上，发现bug的源泉，在于IOS下面使用高德地图，必须引用nvue那几个类库。

还有问题的话，可以加我QQ：13040交流~~

占位

uni-app动态修改原生导航栏背景颜色属性样式教程：

代码如下：

uni.setNavigationBarColor({  
    frontColor: '#ffffff',  
    backgroundColor: '#15750a',  
    animation: {  
        duration: 400,  
        timingFunc: 'easeIn'  
        }  
})

uni-app动态隐藏底部tabbar栏教程：

代码如下：

uni.hideTabBar();