免费试用

跨平台小程序在线开发工具,用做网页的技术做小程序,兼容微信、支付宝、抖音、快手、百度等主流小程序平台!

weapp搭建小程序开发环境

小程序作为移动互联网应用的重要分支,在近年来越来越受到开发者的青睐。随着微信小程序平台的逐渐完善,越来越多的人开始学习和开发小程序。在这个过程中,搭建小程序开发环境非常关键。本文将介绍如何搭建weapp小程序开发环境。

首先需要安装Node.js 包管理器NPM组件,可以通过官网(https://nodejs.org/)进行下载安装。在MacOS或Linux 操作系统下,可以使用apt-get + Node.js查看是否安装:

```

node -v

npm -v

```

确保版本为合适的版本即可。之后,我们还需要安装小程序开发工具IDE,可以通过下载安装包(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)进行下载并安装。

安装完开发工具后,我们需要创建一个新的小程序项目。在开发工具中,点击“新建项目”,并输入小程序的相关信息,包括小程序的AppID、项目名称、项目路径等。创建完毕后,开发工具会生成一些文件和目录,用于小程序的整个开发过程。

在小程序项目的目录下,我们可以看到一些默认的目录和文件:

```

├── app.js

├── app.json

├── app.wxss

├── pages

│ ├── index

│ │ ├── index.js

│ │ ├── index.wxml

│ │ └── index.wxss

└── utils

└── util.js

```

其中,app.js是小程序的入口文件,app.json是小程序的配置文件,app.wxss是小程序的样式文件,pages目录是存放小程序页面的目录等等,utils目录是存放小程序内部需要公用的函数等等。

除了以上文件以外,我们需要额外配置开发过程中用到的一些工具。比如,将ES6、Less等语法编译成小程序可以执行的语法。因此,我们需要引入开发工具内置的自动构建工具,并在配置文件中增加自定义配置,告诉开发工具该如何处理不同类型的文件。

在开发工具中,我们可以找到“项目”=>“项目设置”=>“构建npm”选项。勾选上“使用npm模块”即可启用。之后,我们需要在命令行中进入小程序项目的根目录下,执行以下命令:

```

npm init

npm install wepy-cli -D

npm install less autoprefixer cssnano less-loader -D

```

安装完毕后,我们需要在项目根目录下创建一个名为wepy.config.js的文件:

```

const path = require('path')

const Less = require('less')

module.exports = {

wpyExt: '.wpy',

eslint: true,

cliLogs: true,

build: {},

resolve: {

alias: {

'@utils': path.join(__dirname, 'src/utils')

}

},

compilers: {

less: {

compress: true,

plugins: [new Less.Plugin.AutoPrefixer({ browsers: ['iOS >= 8', 'Android >= 4.1'] }), new Less.Plugin.CleanCSS({ advanced: true })]

},

/* sass: {

outputStyle: 'compressed'

}, */

babel: {

sourceMap: true,

presets: [

'env'

],

plugins: [

'transform-class-properties',

'transform-decorators-legacy',

'transform-object-rest-spread'

]

}

},

plugins: {},

appConfig: {

noPromiseAPI: ['createSelectorQuery']

}

}

```

在配置文件中,我们配置了wepy-cli编译小程序的后缀名、支持ESlint语法检查、cli日志输出、自定义地址别名等等。同时,我们还配置了less、autoprefixer和cssnano等插件,用于less语法的编译和浏览器兼容性处理。开发者可以自行按需添加其他插件,进行扩展和定制化。

到这里,我们已经完成了weapp小程序的开发环境的搭建,下一步就是在该环境下进行小程序的开发。


相关知识:
阿里微信小程序开发费用
随着移动互联网的迅速发展和智能手机用户的大量增加,移动应用程序的需求量不断增加。其中,微信小程序作为一种新兴的平台,既可以节省用户手机的空间,又可以方便用户快速地获取所需服务。尤其是在商业展示和销售方面,微信小程序有着广泛的应用前景。那么,阿里微信小程序开
2023-08-09
阿里云和腾讯云哪个适合小程序开发
小程序是一种轻量级应用程序,它可以在微信、支付宝等平台上运行,不需要通过下载、安装等繁琐的过程,具有开发成本低、推广方便等特点,因此受到越来越多的关注。开发小程序需要一个后台服务器,以提供必要的数据接口和存储服务,而阿里云和腾讯云是国内云计算领域的两大巨头
2023-08-09
qq小程序开发保存
QQ小程序是腾讯推出的一种无需下载安装即可使用的轻量化应用程序,它具有轻便、快捷、功能强大的特点,让用户可以可以更加方便地获取信息和解决问题。在使用QQ小程序时,用户可能会需要使用保存功能,将自己感兴趣的信息或者内容保存在手机上以便随时访问。那么,QQ小程
2023-08-09
promise小程序开发
Promise是JavaScript中用于处理异步操作的一个对象,它可以帮助我们优雅地编写异步代码,并配合async/await使用,使得代码更加简洁优雅。在小程序中使用Promise也是非常常见的,比如网络请求、数据读写等等都可以使用Promise来处理
2023-08-09
ipad能否进行微信小程序开发工具
微信小程序是国内一个非常流行的应用程序开发方式,为企业提供了一个简单而又有效的创建小应用的方式。小程序相比于传统的APP无需下载安装,省去了用户的安装和更新的步骤,使得使用更加的方便和快捷。在微信小程序的开发过程中需要使用微信小程序开发工具,那么问题来了:
2023-08-09
h5和小程序的开发要注意什么
H5和小程序是目前互联网领域两种非常热门的开发方式。下面将从原理和开发要注意的几个方面详细介绍H5和小程序的开发。一、H5开发的原理H5全称为HTML5,是超文本标记语言第五个版本。从原理上来说,H5本质上是一个由HTML、CSS和JavaScript三大
2023-08-09
jsmooth生成exe
JSmooth是一个免费开源的Java应用程序包装器,它将Java应用程序(JAR文件)转换为Windows平台的可执行文件(EXE文件)。这使得Java应用程序可以更轻松地在没有预安装Java运行环境(JRE)的Windows计算机上运行。JSmooth
2023-05-26
渭南微信小程序开发工具
渭南微信小程序开发工具是一款支持微信小程序开发的IDE(Integrated Development Environment)工具,其集成了小程序开发所需的各种工具,如代码编辑器、调试器、自动补全等,使得开发者可以更加高效和便捷地开发微信小程序应用。在具体
2023-05-26
微信小程序开发工具电脑预览
微信小程序开发工具是微信官方免费提供的开发工具,它可以协助开发者在电脑上进行小程序开发、调试和预览。电脑端预览是小程序开发一个非常重要的功能,通过该功能,开发者可以在电脑上更加便捷地进行小程序的开发调试,省去了手机调试的麻烦。下面我将详细介绍微信小程序开发
2023-05-26
微信小程序开发工具云环境配置
微信小程序开发工具是一款非常方便的工具,可以极大地简化小程序开发的过程。在使用小程序开发工具时,我们可以使用其提供的云环境,方便地存储和管理小程序相关的数据。所谓云环境,其实就是一种基于云技术的应用开发环境。在小程序开发中,开发者可以通过云环境来快速搭建小
2023-05-26
免费制作微信小程序的开发工具
随着微信的普及,微信小程序逐渐成为了一种较为流行的移动应用开发方式。相比于传统的原生应用和H5应用,微信小程序具有更小的体积、快速的加载、更加友好的使用体验等优点。本文将介绍一些免费制作微信小程序的开发工具。1. 微信官方开发者工具微信官方开发者工具是微信
2023-05-26
东莞一个微信小程序开发工具公司
东莞市是一座具有强烈的制造业特色的城市,近年来也开始发展新兴产业,如IT产业。IT行业中的微信小程序开发工具公司就是其中一个新兴产业。微信小程序是微信平台上的一种轻量化应用,具有便捷、快速、低成本并且跨平台的特点。随着微信用户数量的不断增长,微信小程序的应
2023-05-22