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

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

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

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

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

javascript 复制代码
// app.js
App({
  onLaunch() {
   
   
  },
  globalData: {
  
  }
})
css 复制代码
/**app.wxss**/
css 复制代码
{
  "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、下载插件包

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

提取码:1234

2、安装less插件

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

粘贴进去

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

打开setting.json进行全局配置

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

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

相关推荐
三脚猫的喵6 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
2501_915106327 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬7 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app
开发加微信:hedian1169 小时前
微信推客小程序系统开发技术实践
微信·小程序
Python大数据分析10 小时前
uniapp微信小程序商品列表数据分页+本地缓存+下拉刷新+图片懒加载
缓存·微信小程序·uni-app
小白_ysf10 小时前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
imHere·10 小时前
UniApp 分包异步化配置及组件引用解决方案
微信小程序·uni-app·分包
说私域12 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在淘宝公域流量运营中的应用研究
人工智能·小程序·开源
2501_9160137413 小时前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
canglingyue13 小时前
微信小程序加速计开发指南
微信小程序·小程序