Write the Code. Change the World.

分类目录
11月 19

发表于 • 992 views • 没有评论!

前端

在微信环境，通过分享方式（非用户搜索，非小程序盒子）， 能打开目标小程序，进入目标页面的方式。除了扫小程序码还有小程序链接方式。生成小程序性链接的能力有各种控制，链接的作用和生命也各有控制。做一个体验好，效果好的分享，得细心和用心。还得处处找一切能突破微信自己的阻碍。

主要是小程序分享到朋友圈从来就没一个好的体验。可以通过海报的方式，但用户得长按海报。不是所有人都知道要长按，也不是所有人都愿意长按。其他途径，比如小程序链接。虽然用户可以点击进入，但每次都弹个窗让用户确认。从体验感来说是不好，从用户意愿度（广告）来讲，算是一次告知。可是，既然用户愿意点了，意愿度还是有的，何必弹个窗来恶心人呢。每个人都有每个人的考虑，人在屋檐下，不得不低头。

https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/queryScheme.html

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

开始

看了下边的各种说明，只想说在微信内，打开小程序的途径 scheme 码和 urllink 都不好。这种码 A 打开了，其他人就打不开了。怎么发朋友圈宣传。短链接看起来是最好的，可短链接不是谁都有权限生成的，只有特殊服务类目才可以。就像获取用户当前位置一样，需要特殊服务目录（这个还得去申请接口权限）才有资格用。说来说去，微信内朋友圈宣传只能短链接或海报了。只能去争取申请能获取该接口的服务了。

微信外打开小程序 scheme 码 ios 是直接可以，android 需要借助 h5。 urllink 必须都得先跳转到 h5。只是跳转到 h5，然后再跳转到小程序。不必在 h5 那边再点击再跳转。就是 scheme 码和 urllink 只能一个人打开就有点恶心。

其实还有一种方式，是可以的。就是使用微信开放标签。需要借助服务号（个人可以借助云开发的静态网站），需要额外调用 js。请看下边的链接。

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E5%BC%80%E6%94%BE%E6%A0%87%E7%AD%BE%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/introduction.html

scheme 码

该接口用于获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，有数量限制，目前仅针对国内非个人主体的小程序开放 

# 重点说明
自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Scheme。若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Scheme打开该小程序。 在本次规则调整生效前已经生成的URL Scheme，如果有效期超过30天或长期会被降级为30天有效，只能被1个用户访问，开始时间从调整日期开始计算。

每天生成 URL Scheme 和 URL Link 总数量上限为50万

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过 Scheme 跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序

urllink

获取小程序 URL Link，适用于短信、邮件、网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序链接，有数量限制，目前仅针对国内非个人主体的小程序开放 

# 重点说明
自 2022 年 4 月 11 日起，URL Link有效期最长 30 天，不再支持永久有效的URL Link、不再区分短期有效URL Link与长期有效URL Link。若在微信外打开，用户可以在浏览器页面点击进入小程序。每个独立的URL Link被用户访问后，仅此用户可以再次访问并打开对应小程序，其他用户无法再次通过相同URL Link打开该小程序。 在本次规则调整生效前已经生成的URL Link，如果有效期超过30天或长期会被降级为30天有效，只能被1个用户访问，开始时间从调整日期开始计算。 

每天生成 URL Scheme 和 URL Link 总数量上限为50万

只能生成已发布的小程序的 URL Link。
在微信内或者安卓手机打开 URL Link 时，默认会先跳转官方 H5 中间页，如果需要定制 H5 内容，可以使用云开发静态网站。

short link

获取小程序 Short Link，适用于微信内拉起小程序的业务场景。目前只开放给电商类目(具体包含以下一级类目：电商平台、商家自营、跨境电商)。通过该接口，可以选择生成到期失效和永久有效的小程序短链 

通过服务端接口可以获取打开小程序任意页面的 Short Link。适用于微信内拉起小程序的业务场景。

目前只开放给电商类目小程序，具体包含以下一级类目：电商平台、商家自营、跨境电商。

最终

说了好多啰嗦的话。微信内推广，宣传，短链接肯定是最好用的。可得去申请服务类目。官方说只对电商开放。不过，看到其他非电商类目的也可以（比如招聘）。

8月 31

发表于 • 4,311 views • 没有评论!

vue,前端

做项目的时候，我们经常会用到 index.vue。咋回事呢。行为习惯爱好。比如有这么一个文件 views/home/index.vue, views 是视图根目录，home 是主页目录，index.vue 我习惯性作为目录的首个文件。由于 cli-plugin-eslint 的作用，这样是不行的。得用驼峰或-方式来命名。这样单个字母就不好搞了。不好搞也要搞，不能妥协。

干

在项目根目录，添加 .eslintrc.js 文件。如果已经有了就修改。主要改成下边这个样子。

// .eslintrc.js
module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    parserOptions: {
      ecmaVersion: 2020,
    },
    rules: {
      "vue/multi-word-component-names": [
        "error",
        {
          ignores: ["index"], //需要忽略的组件名
        },
      ],
    },
  };

然后重新启动就好了。

读读

https://vue3js.cn/es6/

5月 29

发表于 • 1,812 views • 没有评论!

vite,vue,前端

当后端接口还没有完成的时候，前端没必要等。可以自己使用 mock 来构建服务端接口的环境和数据。自己动手，丰衣足食。

http://mockjs.com/

安装

pnpm add mockjs vite-plugin-mock -D

配置

在 vite.config.ts 中配置

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({ 
      supportTs: true,
      mockPath: "./src/mock/source", // 解析，路径可根据实际变动
      localEnabled: true, // 开发环境设为true，
      prodEnabled: false, // 生产环境设为true，也可以根据官方文档格式
      injectCode: 
      ` import { setupProdMockServer } from './src/mock';
        setupProdMockServer(); `,
      watchFiles: true, // 监听文件内容变更
      injectFile: resolve("src/main.ts"), // 在m
    })
  ]
})

新建数据

在 src/mock/source 下新建 user.ts 文件，内容如下：

export default [
  {
    url: "/api/users",
    method: "GET",
    response: () => {
      return {
        code: 0,
        message: "success",
        result: {
          nickname: '神奇动物在哪里',
          gender: 1
        },
      };
    }
  }
]

使用

import axios from 'axios'

axios.create({
  baseURL: import.meta.env.VITE_BASE_URL
})

axios.get("/api/users").then(res => { console.log(res); });

运行起来，看到控制台的网络中请求的状况：

请求网址: http://localhost:3000/api/users
请求方法: GET
状态代码: 200 OK
远程地址: 127.0.0.1:3000
引荐来源网址政策: strict-origin-when-cross-origin

# response
{code: 0, message: "success", result: {nickname: "神奇动物在哪里", gender: 1}}
code: 0
message: "success"
result: {nickname: "神奇动物在哪里", gender: 1}
gender: 1
nickname: "神奇动物在哪里"
5月 26

发表于 • 3,541 views • 没有评论!

vite,vue,前端

原子化 css 的好用是真的好用。
https://antfu.me/posts/reimagine-atomic-css-zh

https://juejin.cn/post/7028841960752283656

https://blog.csdn.net/qq_41499782/article/details/124074678

https://blog.csdn.net/sg_knight/article/details/124097860

https://windicss.org/

https://github.com/unocss/unocss

使用 unocss

https://github.com/unocss/unocss

class 可以参考参考
https://www.tailwindcss.cn/docs/align-items

这里用 pnpm 来安装。

  • 安装添加 
pnpm add unocss -D
  • 添加到 vite.config.ts 中
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Unocss({})
  ]
})
  • main.ts 中引入
import 'uno.css'
  • 项目中使用
<div class="w-300px h-120px rounded-8px m-20px shadow-md">
</div>

仅仅用样式就可以实现宽300像素高120像素圆角8像素 margin 20 像素，带 md 程度的阴影的div盒子。这样多方便呀。

当你已经在使用了，可以通过 http://localhost:3000/__unocss 查看生成的 css 文件，是不是很人性化，文件量还小。

vue 面试题

https://vue3js.cn/interview/

5月 25

发表于 • 833 views • 没有评论!

vite,vue,前端

都说 pnpm vite vue 组合好。那就试试。 

# shenya 是项目名
pnpm create vite  shenya

cd shenya

pnpm install

pnpm run dev

如果从来没有使用过 pnpm，第一次创建的时候是要花一点时间。后边就是秒创建了哈。