惊！一个uni-app项目就这样创建了？

程序员摩根
473 阅读5分钟

这是一篇很基础的新手入门教程，很多资料都可以在百度和官网上搜索到。

我写这一篇的目的是方便自己做技术的sop，把这些流程上的资料汇总一下，第一步做什么，第二步做什么......，然后按照这样的顺序执行下去，方便我回过头来看查阅，当成技术文档作参考，开发效率也会很高。

首先进入到uni-app官网，按照官网的步骤自动生成和启动。

这里需要提前准备好几个工具，下载地址在下面，并且建议下载最新版本的：

我将按照以下步骤把整个过程描述一遍。

- 初始化uni-app项目
    - 第一步，打开并新建一个uni-app项目
    - 第二步，选择项目存放的位置并选择需要的模板
    - 第三步，在微信小程序环境中运行项目
    - 第四步，初始化微信小程序项目，解决项目报错
- 基本配置
- 引入第三方ui框架
    - 第一步：进入到vant-weapp的代码库，并下载代码
    - 第二步：全局引入组件，并在页面中使用
    - 第三步：在小程序中重新编译，并查看效果
- 总结

初始化uni-app项目

下面，我将逐步把uni-app的创建过程展示一遍。

第一步，打开并新建一个uni-app项目

点击【文件】 > 【新建】 > 【项目】的顺序进行创建。 image.png

第二步，选择项目存放的位置并选择需要的模板

按照如下步骤，进行项目的创建。 image.png

第三步，在微信小程序环境中运行项目

选择【运行】> 【运行到小程序模拟器】> 【微信开发者工具-（你的项目名称）】，选择之后就会自动启动前面下载好的微信开发者工具。 image.png

如果第一次没有打开，那么可以点击【运行】> 【运行到小程序模拟器】> 【停止微信开发者工具-（你的项目名称）】，重新再打开一遍即可。 image.png

第四步，初始化微信小程序项目，解决项目报错

进入到小程序之后，项目初始化成功了，页面大致长成这样，说明项目初始化成功了。但此时发现一个报错：TypeError: Cannot read property forceUpdate of undefined。这个错误不用着急，我们配置好小程序的appId就可以了。 image.png

为了方便演示，我注册了一个测试小程序，将测试小程序的appId粘贴到文件中。回到微信小程序开发工具之后，重新刷新，错误消失了。随后，我们就可以放心的进行项目的开发。

image.png

基本配置

使用uni-app的配置和默认的小程序文件目录稍微有一些不同。传统的微信小程序的目录一般是app.json(做一些全局的配置)、app.js(定义一些全局的变量的执行生命周期函数)。uniapp主要在pages.json中统一的配置。

假设我想要配置2个tabbar，按照官方的步骤配置结果如下

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/home.png",
            "selectedIconPath": "static/home_active.png",
            "text": "主页"
    }, {
            "pagePath": "pages/my/index",
            "iconPath": "static/my.png",
            "selectedIconPath": "static/my_active.png",
            "text": "我的"
    }]
}

配置之后编译，页面展示效果如下：

image.png

以上，基本配置就好了。

引入第三方ui框架

我这里以引入vant-weapp作为例子，来演示一下整个使用过程。

第一步：进入到vant-weapp的代码库，并下载代码

进入到github中vant-weapp的代码库，进入到tags中，找到一个自己想用的版本zip包并下载下来。

在项目的根目录下创建wxcomponent文件目录，用于创建所有第三方插件，然后将vant-weapp项目根目录下的dist文件拖入到wxcomponent文件夹里面，将dist文件名更换为vant。

第二步：全局引入组件，并在页面中使用

为了方便使用，直接在app.js中配置easycom。这样在引用组件的时间，不要单独注册了，直接引用即可。配置如下：

"easycom": {
  "autoscan": true, // 自动扫描
  "custom": { // 自定义组件
    "van-(.*)": "@/wxcomponents/vant/$1/index"
  }
}

在首页组件中引入van-button，代码如下：

<view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
        <text class="title">{{title}}</text>
    </view>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
</view>

第三步：在小程序中重新编译，并查看效果

然后点击【运行】> 【运行到小程序模拟器】> 【停止微信开发者工具-（你的项目名称）】，重新再点击【运行】> 【运行到小程序模拟器】> 【微信开发者工具-（你的项目名称）】。

此时微信小程序就重新编译了一次，效果如下：

image.png

总结

整个过程还是比较简单的，不过有朋友说vant-weapp框架的兼容性不太好，建议使用uni-app自带的组件。也很简单，在第三方组件引入的几个步骤对应的修改一下就行了。

把整个使用过程按照这种SOP的方式，就很简单直白了，看着文章一步一步的傻瓜式操作就可以了。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。精彩内容在后面，防止跑丢，友友们可以先关注我，每一篇文章都能及时通知不会遗失。

avatar
文章
阅读
粉丝