web前端-基于的微信小程序项目起步（uni-app）

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

web前端-基于的微信小程序项目起步（uni-app）

启动uni-app简介

uni-app 是一个使用 Vue.js开发所有前端应用程序的框架。 开发编写一套代码，可以发布到iOS、H5、各种小程序（微信/支付宝/百度/今日头条/QQ/钉钉/淘宝）、快应用等平台。

详细uni-app官方文档请阅读

开发工具

uni-app 官方推荐用于开发uni-app 类型的项目。 主要优点：

当然，你也可以根据自己的喜好选择使用自己喜欢的编辑器。

下载

访问官方网站首页

点击主页上的按钮

选择下载正式版->App开发版

安装：将下载的zip包解压，并将解压后的文件夹存放在纯英文目录下（且不能包含括号等特殊字符）。 双击.exe开始scss/sass编译安装。

为了方便编写样式（例如：），建议安装scss/sass编译插件。 插件下载地址：

进入插件下载页面后，点击右上角导入插件按钮即可自动安装。 截图如下：

快捷键方案切换

操作步骤：工具->默认快捷键方案切换->VS Code

修改编辑器的基本设置

操作步骤：->首选项->打开.json并根据需要进行配置

新建uni-app项目文件->新建->项目

填写项目基本信息

项目创建成功

将项目运行到微信开发工具，填写自己微信小程序的AppID：

中，配置“微信开发工具”的安装路径

在微信开发工具中，通过设置->安全设置面板打开“微信开发工具”的服务端口：

在 中，点击菜单栏的运行 -> 运行小程序模拟器 -> 微信开发工具。 当前uni-app项目编译完成后，会自动运行到微信开发工具中，方便查看项目效果和调试：

scss语法学习

Scss在CSS语法的基础上增加了变量()、嵌套(规则)、混合()、导入()等高级功能，以实现更高效的网站前端开发。

Sass官方中文文档：

安装相关插件及配置

要在.中使用sass，我们首先需要安装两个插件：easy sass（编译）和sass（代码提示）插件

在.json中配置以下内容：

"easysass.formats":[
      {"format": "expanded",
        "extension": ".css"},
      {"format": "compressed",
        "extension": ".min.css"}
    ],
"easysass.targetDir": "./",// 这个是配置.css文件生成的路径

基本格式选择器的嵌套

可以使用不同的选择器进行嵌套，这样可以更加方便直观地查看和管理选择器的父子关系：

在父选择器后面添加内容&

添加符号“&”表示在父容器后面添加相应的后缀，但可以是元素的某种行为，也可以是其他行为。

属性嵌套

当属性名称前面有相同字​​符时，可以使用属性嵌套方法。注意：字体：{}如何微信小程序开发，冒号后面和大括号之间必须有空格。

占位符选择器 %foo

有时需要定义一组样式，但不要将其用于某个元素。 这个样式库需要调用时必须启用，使用“%foo”占位符，使用@进行调试。 %foo的名字可以自定义，需要前面加符号%

代码注释

支持标准CSS注释语法，单行注释“//”和多行注释“/* */”。 注释.scss中的规则：

// 单行注释
/*
 * 多行注释 */
/*!
 * 版权声明
 * 作者: #{#author} */

文件导入

使用@导入文件

导入 .scss 文件

要导入 .scss 文件，请使用 @ 进行导入。 文件名可以带有 .scss 后缀，也可以省略。

注意：对于导入的 .scss 文件，由于文件中的代码将在导入发生的文件中重新生成web前端-基于的微信小程序项目起步（uni-app），因此无需为导入的文件生成单独的 .css 文件。 解决方案是添加一个下划线“_”符号，确保该文件不会重新生成为.css文件。 导入文件时，前面的下划线可以写也可以省略：

// 以下代码表示将导入一个名为 “_main.scss” 的文件
// 方法1
@import 'main';
// 方法2
@import '_main';

导入的文件也可以写入选择器中。 编写选择器后，导入文件中的所有变量将仅应用于该选择器。 同时，导入的选择器也会被添加到导入文件中所有选择器的前面。 曾用名：

.container {
    @import 'main';
    color: $color; 
}

导入普通 .css 文件

以下方法只会将文件作为普通的css语句引入：

@import 'main.css';
@import 'http://puji.design/main.css';
@import url(main);
@import 'landscape' screen and (orientation: landscape);

注意：使用@'main.css'的形式引入该文件。 编译后，文件地址将是计算机的绝对地址。 谨慎使用这种形式的介绍。 推荐使用@url(main)方法。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等