微信小程序入门1.1

一、微信小程序开发环境的搭建

参考微信小程序官方文档——起步目录下的开始

二、微信小程序基本的目录结构

小程序包含一个描述整体程序的 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

参考书籍《微信小程序项目开发实战》沈顺天