uni-app_微信小程序

最新推荐文章于 2023-03-28 22:06:10 发布

Flying____fish

最新推荐文章于 2023-03-28 22:06:10 发布

阅读量373

点赞数

文章标签：前端 vue.js javascript 小程序 uni-app

本文链接：https://blog.csdn.net/Flying____fish/article/details/124774767

版权

0、前言

最近接触到一个小程序的项目，便开始学习小程序是怎们玩的，其实算算时间也确实要开始接触小程序相关的知识了，早晚跑不了的，选择uni-app最为切入点，进行学习使用，初步接触的感受就是和vue关联比较大，在有一定的vue基础的前提下来学，相对来说还是比较容易接受的。换句话来说学习uni-app的前提就是了解一些关于vue的知识。
看一端官方介绍
- 什么是uni-app？
  
  uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。（第一段介绍）

1、初体验

1.1开发方式(两种)

使用DColud公司提供的HbuilderX来快速开发
使用脚手架快速搭建和开发

1.2脚手架搭建项目

全局安装

npm i -g @vue/cli

npm install -g @vue/cli@4.5.15

关于脚手架的版本，前面的最新的版本，但是在配置的时候遇到问题大致意思版本太高，出现某种不兼容的情况，所以降级为了下面的版本
创建项目

vue create -p dcloudio/uni-preset-vue my-text
启动项目

cd my-text

npm run serve

npm run dev:mp-weixin
微信小程序开发者工具导入项目

导入之前需要到官网注册账号，并下载开发者工具

微信官方文档

2、项目结构介绍

2.1项目目录

uni-app官方文档

3、样式和sass

3.1样式和sass

支持小程序的rpx和h5的vw、vh

 /* rpx 小程序中的单位 750rpx = 屏幕宽度 */
 /*vh就是当前屏幕可见高度的1%，也就是说,height:100vh == height:100%;/*
 /* vh h5中的单位 100vh = 屏幕宽度 */

前端中几个单位（em、rem、vh、vw）的区别

内置有sass的配置了只需要安装对应的依赖即可 npm i sass-loader node-sass
vue组件总在style标签上加入属性 <style lans="sass">

3.2 nvm管理node

运行时遇到一些问题，在此做一些记录，关于nvm管理node版本也是第一次遇到，使用过后感觉确实方便，切换版本来去自如。

[Error: Cannot find module 'webpack/lib/RuleSet'
windows下实现node版本的切换
nvm use 乱码
Syntax Error: Error: Node Sass version 7.0.1 is incompatible with ^4.0.0.
```
node uninstall node-sass
npm i -D sass
```
VM57 WAService.js:2 TypeError: Cannot read property 'forceUpdate' of undefined

无AppID