uniapp基础使用指南

uniapp的基础使用

uniapp使用vue的语法,微信小程序的组件和api会这两项可直接上手 该文章以微信小程序为例,说明使用uniapp创建项目及基础配置操作

1.准备工作 安装HbuilderX和微信开发者工具(各个平台的的小程序开发工具,自行百度下载,这里以微信小程序为例)
2. 打开HbuilderX 点击 文件>新建>项目出现下图 根据图上更改
3. 项目文件夹介绍

4.第一次运行需要配置一下 运行>运行到小程序模拟器>运行设置(这里以微信小程序为例,其他一样)
5.设置后就可以 运行>运行到小程序模拟器>微信开发者工具, {注:如果是第一次预览的话 需要到微信开发者工具里需要开启端口(设置=>安全=>服务端口 开启) 即可预览}

打开微信开发者工具可能有点慢 等会就好了

6.选择pages文件夹右键>新建页面

7.pages.json页面

8.设置tabBer底部导航 在pages.json里,跟pages同级设置 详情看官方文档(框架>配置)

	"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",//路由
        "iconPath": "static/img/index-o.png",//未激活图标
        "selectedIconPath": "static/img/index.png",//激活图标
        "text": "首页"//导航名称
    }, {
        "pagePath": "pages/myself/myself",
        "iconPath": "static/img/index-o.png",
        "selectedIconPath": "static/img/index.png",
        "text": "我的"
    }]
},

运行如下 使用了tabBar路由跳转 使用uni.switchTab才能跳转(详情查看文档API页面>路由与页面跳转)

9.来到manifest.json页面 在微信小程序配置项里勾选 es6转es5 上传代码样式补全 上传代码压缩
上线时勾选检查安全域名(会同步到微信开发者工具里的设置)

10.新建的js文件都需要到main.js里注册才会执行
11.在app.vue的onLaunch app的生命周期里可拿到场景值

 onLaunch: function(val) {
	console.log('App Launch');
	console.log(val);  //val即场景值代码
	}, 

12.unpackage是编译包 编译为微信小程序 就有一个微信小程序的包

13.如果需要使用自定义组件 在pages同级目录下 新建components文件夹后 可右键新建组件(使用方法跟vue的组件一样,传值,传方法跟vue一样)
这里说下使用uniapp官方插件市场的组件
插件市场链接 https://ext.dcloud.net.cn/ 在插件市场找到心仪的组件点进去

往下翻找到 使用方法 使用失传已久的CV大法即可

下一篇说说dom操作和在uniapp里使用vuex
uniapp基础使用指南2