【微信小程序独立开发1】项目提出和框架搭建

前言:之前学习小程序开发时仿照别人的页面自己做了一个商城项目和小说项目,最近突发奇想,想从0开发一个关于《宠物日记》的小程序,需求和页面都由自己设计,将在这记录开发的全部流程和过程中遇到的难题等...

 1、搭建小程序项目基础框架

 首先创建小程序项目,AppID在微信开发者页面自己申请获取,这里不使用云服务,并且选用JS模板进行开发。

 项目打开后的页面如上,首先删除基本样式

// app.js
App({onLaunch() {},globalData: {}
})
/**app.wxss**/
{"pages": ["pages/home/home"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Weixin","navigationBarBackgroundColor": "#ffffff"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

最后的页面效果如下: 

2、配置Less插件

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码

1、下载插件包

百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固,支持教育网加速,支持手机端。注册使用百度网盘即可享受免费存储空间icon-default.png?t=N7T8https://pan.baidu.com/s/1xPxDRWsNgJjx4_aQY3V_eg

提取码:1234

2、安装less插件

解压后,打开微信开发者工具,编辑->打开编辑器扩展目录

粘贴进去

3、安装成功后进行配置,打开设置>Extension Settings

打开setting.json进行全局配置

 

添加如下代码,可以将less自动转换为微信小程序识别的wxss文件:

   

基本工作准备完成,开始编写业务代码!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/345038.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1024 科学计数法 (20)

科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [-][1-9].[0-9]E[-][0-9],即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指数部分的正负号即使对正数也必定明确给出。 现以科学计数…

Danswer部署指南

Quickstart How to deploy Danswer on your local machine ​ Requirements gitdocker with compose (docker version > 1.13.0) ​ Setup This quickstart guide covers setting up Danswer for local execution Clone the Danswer repo: git clone https://github.com…

一款快速稳定的漏洞扫描工具【afrog】零基础入门到精通

工具介绍 afrog 是一款快速、稳定的高性能漏洞扫描器。支持用户自定义PoC,内置CVE、CNVD、默认密码、信息泄露、指纹识别、越权访问、任意文件读取、命令执行等多种类型。通过afrog,网络安全专业人员可以快速验证和修复漏洞,这有助于增强他们…

强化学习应用(二):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法,用于解决基于马尔可夫决策过程(MDP)的问题。它通过学习一个价值函数来指导智能体在环境中做出决策,以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…

mac 使用brew卸载node

1.查看当前的node版本 node -v 2.查看使用brew 安装的版本,可以看到本机装了14、16、18版本的node brew search node 3.卸载node brew uninstall node版本号 --force 如分别删除14、16、18版本的node命令如下 brew uninstall node14 --force brew uninstall no…

软考高级系统架构设计师考试经验分享

文章目录 1. 软考介绍(1)什么是软考(2)软考的作用(3)软考各科目的难度(4)考试时间(5)考试形式 2.系统架构设计师备考经验(1)辅导资料&…

谷粒商城-缓存使用分布式锁SpringCache(5天)

缓存使用 1.1.1 哪些数据适合放入缓存 即时性、 数据一致性要求不高的 访问量大且更新频率不高的数据(读多, 写少) 例如:电商类应用, 商品分类, 商品列表等适合缓存 本地缓存 使用Map进行本地缓存 本地缓存…

如何配置Kafka账号密码

背景 我们需要与第三方系统进行数据同步,需要搭建公网Kafka,Kafka默认是没有用户密码校验的,所以我们需要配置用户名密码校验。 配置 新增JAAS配置文件 在conf目录下新增kafka_server_jaas.conf文件,文件内容如下:…

基于SpringBoot的洗衣店管理系统

基于SpringBoot的洗衣店管理系统的设计与实现~ 开发语言:Java数据库:MySQL技术:SpringBootMyBatis工具:IDEA/Ecilpse、Navicat、Maven 系统展示 登录界面 可视化展示 用户界面 管理员界面 摘要 洗衣店管理系统基于Spring Boot框…

vue3-响应式基础之reactive

reactive() 还有另一种声明响应式状态的方式&#xff0c;即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同&#xff0c;reactive() 将使对象本身具有响应性&#xff1a; 「点击按钮1」 <script lang"ts" setup> import { reactive } from vuec…

js 中 复杂json 组装 实例通用模式

js 中 复杂json 组装 实例 目录概述需求&#xff1a; 设计思路实现思路分析1.js 中 复杂json 组装 实例2.js 中 复杂json 动态 组装 实例3.嵌套数组 参考资料和推荐阅读 ) Survive by day and develop by night. talk for import biz , show your perfect code,full busy&…

SpringBoot整合人大金仓数据库KingBase

1 去KingBase官网下载驱动jar包 2 将解压得到的所有jar包放置在libs目录下&#xff08;没有就新建一个目录&#xff09; 3 在pom文件添加相关依赖 <!--添加KingBase所需要的依赖--> <dependency><groupId>com.kingbase</groupId><artifactId>kin…