跳到主要内容

uni-app开发

微信小程序开发​

使用vue3 vite ts uni-app uni-ui

小知识​

  • 更改路由页面之后，需要重新运行一下

  • 750rpx * 1334rpx 全屏 iPhone6

  • view == div text==span

  • #ifdef H5

    #ifdef H5
    // 只在 H5 平台下编译的代码块
    console.log('This is running on H5 platform.');
    #endif

    // 这部分代码在所有平台都会编译
    console.log('This is common code for all platforms.');

uni-app 命令​

  • 创建项目

npx degit dcloudio/uni-preset-vue#vite-ts uni-app-vue

  • 安装依赖

pnpm i

  • 清理依赖

pnpm store prune

  • 编译

pnpm dev:mp-weixin

  • 运行

Run method: open Weixin Mini Program Devtools, import dist\dev\mp-weixin run.

VSCODE插件相关资料

  • 这两个是用来检查ts

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

  • 安装提示

pnpm i -D @uni-helper/uni-ui-types

问题处理​

pnpm -i 报错处理​

  • Error: Expected "0.17.19" but got "0.16.17"
  • registry.npmmirror.com+esbuild@0.17.19\node_modules\esbuild

pnpm install esbuild@0.17.19

真机调试，一块白屏​

相关资料

eslintrc.json，.prettierc.json

  • manifest.json添加appid 和 settings

     "mp-weixin" : {
        "appid" : "xxxxxxxxxx",
        "setting" : {
            "urlCheck" : false,
            "es6" : true,
            "postcss" : true,
            "minified" : true
        },
        "usingComponents" : true
    },

    很重要 "es6" : true,，不然真机调试，就送你一块白屏

Cannot find name 'uni'.ts(2304)​

pnpm add -D @types/uni-app

原文作者

解决pinia报hasInjectionContext问题​

hasInjectContext报错

call with Alibaba OSS service​

When upload a Gzip png picture,

and only set the ContentType header;

metadata.setContentType("image/png");

and not set

metadata.setContentEncoding("gzip");

anyway I had tried, the uni-app wechat miniprogram can't display the picture,

I make sure there source data.

wrong url,[渲染层网络层错误] Failed to load local image resource​

if url is http:/ just one slash is wrong

快捷键​

  • 智能提示

ctl+i