前言
上篇带来的是小程序里面js之类的工具，这篇给大家带来小程序的搭建以及框架的使用。
准备工作
- 微信开发者工具
- node.js（框架vue使用需要安装）
一、申请步骤
二、原生态应用
2.1、创建应用
一般不需要什么UI，这里就可以开发了，但是需要使用UI你就需要往下走。
2.2、基础脚手架目录介绍
2.3、npm构建
- 构建npm
npm install
- 构建npm（开发者工具菜单栏：工具–构建npm）
- 勾选使用npm模块（右上角详情–本地设置–使用npm模块）
三、为何使用框架以及比较
- 1、学习成本低
- 2、兼容性
- 3、组件化开发
- 4、npm 资源
- 5、提升开发效率
- 6、周期补充、性能提升
- 7、支持样式编译器、代码编辑器
四、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% 是开发对应的环境以及对应应用的打包
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
- 下载包到根目录
地址：https://ext.dcloud.net.cn/plugin?id=1593
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 上面，而这个网址在国内总是网络不稳定，所以我们需要通过第三方服务器下载这个文件。
- 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
控制台报错
请尝试修改这两个配置，还有问题再接着多试下调试基础库
npm run dev:mp-weixin 报错
删除这行