【微信小程序独立开发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文件:

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

相关推荐
文心快码BaiduComate13 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
Emma歌小白3 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子3 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序