一、微信小程序开发环境的搭建
参考微信小程序官方文档——起步目录下的开始
二、微信小程序基本的目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
/*一个小程序主体部分由三个文件组成,必须放在项目的根目录*/
—— app.js //必须,小程序逻辑;项目入口文件:会初始化全局的 Context:App
—— app.json //必须,小程序公共配置;项目配置文件:决定页面文件的路径、窗口的表现、设置网路超时时间等
—— app.wxss //非必须,小程序公共样式表;全局样式文件:该文件中声明的样式对全局页面生效
—— pages //存放小程序页面组件【一个小程序页面有四个文件组成:.js .wxml .json .wxss】
—— index //小程序单个页面目录结构【为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名】
—— index.js //必须,页面逻辑
—— index.json //非必须,页面配置【JSON格式适合存储键-值对数据,且易于人和机器阅读,常被用于配置存储和数据传输】
—— index.wxml //必须,页面布局(结构)
—— index.wxss //非必须,页面样式表
—— project.config.json //存放开发方面的配置信息【主要和开发者相关,与小程序本身配置无关】
—— sitemap.json //小程序索引配置【通过该配置可让用户更好地检索到我们的小程序】
—— utils //存放通用的工具类代码,便于代码复用。
—— components //存放通用的UI组件,便于UI组件的代码复用
三、小练习
1.【hello world】
/** index.wxml **/
<view class="container">
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
/** index.js **/
Page({ //调用Page构造函数创建页面
data:{
motto:'Hello World', //页面展示的文本信息
},
onLoad:function(){} //页面初始化时的回调函数
})
/** app.js **/
App({})
/** app.json **/
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小练习【hello world】",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.【数鸭】
index.wxml app.js app.json三个文件同【hello world】
/** index.js **/
Page({ //调用Page构造函数创建页面
data: {
topStr: '门前大桥下 游过一群鸭 快来快来 数一数',
num: 0,
motto: '', //页面展示的文本信息
},
onLoad: function () { //页面初始化时的回调函数
/**设置定时任务 */
setInterval(() => {
this.data.num >= 10 ? this.data.num = 0 : this.data.num++
this.setData({
motto: this.data.topStr + `${this.data.num}`
})
}, 1000)
}
})
四、以webpack为基础,配置出小程序开发的工程化开发模板
webpack:在前端领域得到广泛的应用,前端三大框架{Vue、React、Angular}均默认webpack作为工程化开发的工具。
1.文件目录打包,如下:
①在项目根目录下新建src文件夹,将【hello world】项目中的文件移入src文件夹;
②win+R → 输入cmd 并按enter键【打开CMD命令窗口】
→【将路径切到项目根目录下】(e: → cd 路径)
→ 输入npm init并按enter键【根据提示输入项目的基本信息】
→(输入完毕后NPM会打印出当前配置的预览效果,询问是否符合预期)
→( 若符合按enter键即可,package.json文件会自动在当前目录下生成)如下图:
各字段的含义如下:
- package name【项目名称】
- version【项目版本:第一位表示大的发布版本,第二位表示功能更新版本号,第三位为缺陷修复版本,默认1.0.0】(node项目一般采用语义化的版本管理)
- description【项目描述】
- entry point【项目入口文件】
- test command【项目的测试命令】
- git repository【项目的Git地址,可以暂时不输入。后续将模板发布到GitHub后,再将发布链接输入到该字段】
- author【作者姓名】
- license【项目的协议:这里默认ISC即可】(ISC:Internet Systems Consortium是一种常用的开源协议)
③安装依赖【使用包管理工具NPM】
/**执行以下命令 【通过npm install -save-dev安装依赖】**/
npm install -save-dev copy-webpack-plugin @babel/core @babel/preset-env less
/** 安装完成后,安装的依赖已添加至package.json文件中 **/
"devDependencies": {
"@babel/core": "^7.17.7",
"@babel/preset-env": "^7.16.11",
"copy-webpack-plugin": "^10.2.4",
"less": "^4.1.2"
}
NPM:node package Manager【node环境依赖管理的工具,在安装node时会默认安装NPM,可用NPM下载、安装任何发布在npm repository上的第三方库】
在CMD命令窗口运行npm -help可查看帮助文档,运行npm install -h可查看install命令的使用方式等。
上面用到的3个node module:
- copy-webpack-plugin【用于复制文件的webpack插件】
- @babel/core @babel/preset-env【将ES 6代码编译为兼容性更好的ES 5代码】
- less【将Less代码编译至CSS代码】
④创建webpack配置文件webpack.config.js【与src文件夹同级】
/** webpack.config.js 【下面是当前webpack的基本配置】**/
const path = require('path')
module.exports = {
mode: 'development', //将编译模式设置为development
entry: './src/app.js', //将入口文件设置为小程序的启动文件
output: { //使最终代码输出在项目根目录的dist文件夹中。
path:path.join(__dirname,'dist')
},
plugins:[]
}
测试配置文件是否生效
/** package.json **/
"script":{
"start":"webpack --config webpack.config.js"
}
运行npm run start命令【在dist目录下生成一个main.js文件,表明webpack编译流程已经跑通】
配置webpack-copy-plugin实现基本的文件复制功能
/** webpack.config.js 【下面是当前webpack的基本配置】**/
const path = require('path')
//引入webpack-copy-plugin插件
const CopyWebpackPlugin = require('webpack-copy-plugin')
module.exports = {
mode: 'development', //将编译模式设置为development
entry: './src/app.js', //将入口文件设置为小程序的启动文件
output: { //使最终代码输出在项目根目录的dist文件夹中。
path:path.join(__dirname,'dist')
},
plugins:[
new CopyWebpackPlugin([
{
from:'**/*',
to:'./'
}
],{
context:'./src'
})
]
}
再次运行npm run start
参考书籍《微信小程序项目开发实战》沈顺天