Skip to main content

uni-app Development

WeChat Mini Program Development​

Using vue3 vite ts uni-app uni-ui

Tips​

  • After changing the route page, you need to re-run it.

  • 750rpx * 1334rpx Full screen iPhone6

  • view == div text==span

  • #ifdef H5

    #ifdef H5
    // Code block compiled only on H5 platform
    console.log('This is running on H5 platform.');
    #endif

    // This part of code will be compiled on all platforms
    console.log('This is common code for all platforms.');

uni-app Commands​

  • Create Project

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

  • Install Dependencies

pnpm i

  • Prune Dependencies

pnpm store prune

  • Compile

pnpm dev:mp-weixin

  • Run

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

VSCODE Plugin Related Information

  • These two are for checking ts

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

  • Install Hints

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

Troubleshooting​

pnpm -i Error Handling​

pnpm install [email protected]

White Screen on Real Device Debugging​

Related Information

eslintrc.json，.prettierc.json

  • Add appid and settings to manifest.json

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

    "es6" : true, is very important, otherwise real device debugging will give you a white screen

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

pnpm add -D @types/uni-app

Original Author

Solve pinia hasInjectionContext error​

hasInjectContext error

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, [Render Layer Network Layer Error] Failed to load local image resource​

if url is http:/ just one slash is wrong

Shortcuts​

  • IntelliSense

ctl+i

Agreement
The code part of this work is licensed under Apache License 2.0 . You may freely modify and redistribute the code, and use it for commercial purposes, provided that you comply with the license. However, you are required to:
  • Attribution: Retain the original author's signature and code source information in the original and derivative code.
  • Preserve License: Retain the Apache 2.0 license file in the original and derivative code.
The documentation part of this work is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License . You may freely share, including copying and distributing this work in any medium or format, and freely adapt, remix, transform, and build upon the material. However, you are required to:
  • Attribution: Give appropriate credit, provide a link to the license, and indicate if changes were made.
  • NonCommercial: You may not use the material for commercial purposes. For commercial use, please contact the author.
  • ShareAlike: If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.