前言

上篇带来的是小程序里面js之类的工具,这篇给大家带来小程序的搭建以及框架的使用。

准备工作

  • 微信开发者工具
  • node.js(框架vue使用需要安装)

一、申请步骤

点我进官网
image.png

二、原生态应用

2.1、创建应用

image.png

一般不需要什么UI,这里就可以开发了,但是需要使用UI你就需要往下走。

2.2、基础脚手架目录介绍

image.png

2.3、npm构建

  • 构建npm
npm install
  • 构建npm(开发者工具菜单栏:工具–构建npm)
  • 勾选使用npm模块(右上角详情–本地设置–使用npm模块)

三、为何使用框架以及比较

  • 1、学习成本低
  • 2、兼容性
  • 3、组件化开发
  • 4、npm 资源
  • 5、提升开发效率
  • 6、周期补充、性能提升
  • 7、支持样式编译器、代码编辑器

image.png

四、mpvue搭建以及介绍

mpvue文档官网

4.1、步骤

  • 构建
vue init mpvue/mpvue-quickstart firstapp
  • 安装依赖
npm install
  • 运行
npm run dev

4.2、介绍

直接修改vue页面即时能够编译出来dist文件夹

五、uniapp构建与介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
俗话说:uni-app在手,做啥都不愁。
官网

主要有两种方式,这里使用vue-cli方式

5.1、构建项目

  • 创建基础脚手架
vue create -p dcloudio/uni-preset-vue my-project
  • 运行与打包
npm run dev:%PLATFORM% 
npm run build:%PLATFORM%

%PLATFORM% 是开发对应的环境以及对应应用的打包
image.png

5.2、目录介绍


uniCloud 	云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb(详见uniCloud)
components 	符合vue组件规范的uni-app组件目录
comp-a.vue 	可复用的a组件
hybrid 		App端存放本地html文件的目录
platforms 	存放各平台专用页面的目录
pages 		业务页面文件存放的目录
static 		存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
uni_modules 	存放[uni_module](/uni_modules)规范的插件。
wxcomponents 	存放小程序组件的目录
main.js 	Vue初始化入口文件
App.vue 	应用配置,用来配置App全局样式以及监听
manifest.json 	配置应用名称、appid、logo、版本等打包信息
pages.json 	配置页面路由、导航条、选项卡等页面类信息

六、原生态整合weUI

npm构建比较简单,这里使用命令形式

  • npm命令
npm install --save weui-miniprogram
  • app.wxss引入全局样式
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
  • 使用
    以pages的index为例,json中引入cell
{
	"usingComponents": {
		"mp-cell": "../../miniprogram_npm/weui-miniprogram/cell/cell "
	}
}

七、原生态整合iViewUI

他其实是一堆现成的组件,你只需要下载,再引用即可
下载组件地址

  • 下载拷贝到项目根目录
  • app.json或者对应页面json文件引用
"usingComponents": {
    "i-button": "../../dist/button/index"
}
  • 使用方法
<i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>

八、uniapp整合uView

简单来说只需要四步即可,但是有些问题需要注意

8.1、介绍

uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。

8.2、安装步骤

安装分两种,下面选择一个即可。

  • npm方法
// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:
// npm init -y

// 安装
npm install uview-ui

// 更新
npm update uview-ui

8.3、配置

上面两种安装后还需要配置,前面三步一样,最后一步不一样

准备工作

// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

配置步骤

  • 引入uView主JS库
// main.js
import uView from "uview-ui";
Vue.use(uView);
  • 在引入uView的全局SCSS主题文件
/* uni.scss */
@import 'uview-ui/theme.scss';
  • 引入uView基础样式
<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
  • 下载方式配置easycom组件模式
    此配置需要在项目根目录的pages.json中进行。
// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
  • npm方式配置easycom组件模式
"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},

8.4、解决报错

安装sass-loader报错

首先要知道的是,安装 node-sass 时在 node scripts/install 阶段会从 github.com 上下载一个 .node 文件,大部分安装不成功的原因都源自这里,因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com 上面,而这个网址在国内总是网络不稳定,所以我们需要通过第三方服务器下载这个文件。
image.png

  • 1、首先安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 2、 用cnpm重新安装一次
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

控制台报错

image.png
请尝试修改这两个配置,还有问题再接着多试下调试基础库
image.png

npm run dev:mp-weixin 报错

image

image-1683215543636
删除这行