杭州建站官网建设,行情软件app网站大全下载,站长工具域名查询社区,长春网站建设企业目录
一、路由与页面跳转
1、tabar与普通页面跳转例子
2、navigateTo
3、switchTab
二、vue组件
1、传统vue组件的使用
2、easycom
三、uView组件库
1、安装配置
2、引入配置
3、使用
四、Vuex
1、认识
2、state基本使用
3、mapState使用
五、网络请求
1、封装…目录
一、路由与页面跳转
1、tabar与普通页面跳转例子
2、navigateTo
3、switchTab
二、vue组件
1、传统vue组件的使用
2、easycom
三、uView组件库
1、安装配置
2、引入配置
3、使用
四、Vuex
1、认识
2、state基本使用
3、mapState使用
五、网络请求
1、封装请求
2、细化每个接口的配置
3、实例调用
六、媒体上传图片
1、uni.chooseImage(OBJECT)
2、代码实例 一、路由与页面跳转
1、tabar与普通页面跳转例子
pages.json配置页面
{pages: [{path: pages/about/about,style: {navigationBarTitleText: 关于,enablePullDownRefresh: false}},{path: pages/index/index,style: {navigationBarTitleText: 首页}}, {path: pages/prompt/prompt,style: {navigationBarTitleText: 提示框,enablePullDownRefresh: false}}, {path: pages/swiper/swiper,style: {navigationBarTitleText: 滑块,enablePullDownRefresh: false}}, {path: pages/form/form,style: {navigationBarTitleText: 表单,enablePullDownRefresh: false}}, {path: pages/router/router,style: {navigationBarTitleText: 路由,enablePullDownRefresh: false}}],globalStyle: {navigationBarTextStyle: white,navigationBarTitleText: 全局,navigationBarBackgroundColor: #000000,backgroundColor: #ffffff},tabBar: {color: #7A7E83,selectedColor: #1296db,borderStyle: black,backgroundColor: #000000,list: [{pagePath: pages/index/index,iconPath: /static/首页2.png,selectedIconPath: /static/首页.png,text: 首页}, {pagePath: pages/about/about,iconPath: /static/关于2.png,selectedIconPath: /static/关于.png,text: 关于}, {pagePath: pages/form/form,iconPath: /static/表单 (1).png,selectedIconPath: /static/表单.png,text: 表单}, {pagePath: pages/router/router,iconPath: /static/路由器组2.png,selectedIconPath: /static/路由.png,text: 路由}]},uniIdRouter: {}
}
router.vue文件模拟页面跳转
templateviewbutton clicktoIndextabar跳转/buttonbutton clicktoSwiper普通页面跳转/button/view
/templatescriptexport default {data() {return {}},methods: {toIndex(){uni.switchTab({url:/pages/index/index})},toSwiper(){uni.navigateTo({url:/pages/swiper/swiper})}}}
/script 2、navigateTo
1跳转非tabBar页面的url路径路径可以带参数
格式path?keyvaluekey2value2
path要跳转页面的路径
toSwiper(){uni.navigateTo({url:/pages/swiper/swiper?namesxx})
}
2获取参数
在跳转到的页面的onLoad函数获取
onLoad(option) {console.log(option);
},3、switchTab
1跳转tabBar页面的url路径需在 pages.json 的 tabBar 字段定义的页面路径不能带参数
2需要的参数可以写到全局变量去获取 二、vue组件
1、传统vue组件的使用
1创建components文件夹》创建.vue组件文件 2在需要的页面引入、注册
index.vue
templateview classcontentheader-cpn/header-cpnimage classlogo src/static/logo.png/imageview classtext-areatext classtitle{{title}}/text/view/view
/templatescript// 注意路径components前没有/// 命名至少两个词组成以小驼峰的形式import headerCpn from components/header.vueexport default {components:{headerCpn},data() {return {title: Hello}},onLoad() {console.log(getApp().globalData);},methods: {}}
/scriptstyle.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
/style2、easycom
1说明
传统vue组件需要安装、引用、注册三个步骤后才能使用组件
easycom将其精简为一步
2使用
只要组件安装在项目的 components 目录下并符合components/组件名称/组件名称.vue
通过插件库引入到components文件下然后直接引入即可
DCloud 插件市场DCloud 插件市场https://ext.dcloud.net.cn/可以看文件的命名和文档来决定引入标签的名字 三、uView组件库
1、安装配置
1打开工程终端
npm install uview-ui1.8.8 如果根目录又没有package.json文件先执行以下命令 npm init -y 2uView依赖SCSS必须要安装此插件否则无法正常运行 查看是否安装scss插件点击工具》插件安装 ①前往插件市场安装 ②终端命令安装
// 安装node-sass
npm i node-sass -D// 安装sass-loader
npm i sass-loader -D
2、引入配置
1主JS库在项目根目录中的main.js中引入并使用uView的JS库
// main.js
import uView from uview-ui;
Vue.use(uView); 注意要放在import Vue之后 2全局SCSS引入uView主题文件
/* uni.scss */
import uview-ui/theme.scss;
3引入基础样式 在App.vue中首行的位置引入注意给style标签加入langscss属性 style langscss/* 注意要写在第一行同时给style标签加入langscss属性 */import uview-ui/index.scss;
/style
4 配置easycom组件模式 在项目根目录的pages.json中配置easycom 注意 ①只有一个easycom字段 ②配置完要重启HX或重新编译项目 // pages.json
{easycom: {^u-(.*): uview-ui/components/u-$1/u-$1.vue},// 此为本身已有的内容pages: [// ......]
}
3、使用
1按钮
templateview头部组件u-button typeprimary主要按钮/u-buttonu-button typesuccess成功按钮/u-buttonu-button typeinfo信息按钮/u-buttonu-button typewarning警告按钮/u-buttonu-button typeerror危险按钮/u-button/view
/template 四、Vuex
1、认识 uni-app 内置了Vuex 1使用场景
当一个组件需要多次派发事件时。例如购物车数量加减。跨组件共享数据、跨页面共享数据。例如订单状态更新。需要持久化的数据。例如登录后用户的信息。当您需要开发中大型应用适合复杂的多模块多页面的数据交互考虑如何更好地在组件外部管理状态时
2规则 应用层级的状态应该集中到单个 store 对象中。 提交 mutation 是更改状态的唯一方法并且这个过程是同步的。 异步逻辑都应该封装到 action 里面
2、state基本使用
1在项目根目录下新建 store 目录》新建 index.js 文件 import Vue from vue
import Vuex from vuexVue.use(Vuex);//vue的插件机制//Vuex.Store 构造器选项
const store new Vuex.Store({state:{msg:存放的信息},mutations:{},actions:{},getters:{}
})
export default store
2在 main.js 中导入文件
import store from ./store
const app new Vue({store,...App
})
3获取数据
templateviewbutton clicktoIndextabar跳转/buttonbutton clicktoSwiper普通页面跳转/buttontext{{$store.state.msg}}/text/view
/template 3、mapState使用
1当一个组件需要获取多个状态的时候将这些状态都声明为计算属性会有些重复和冗余。 为了解决这个问题可以使用 mapState 辅助函数 帮助我们生成计算属性
templateviewtext{{$store.state.msg}}/texttext{{userName}}/text/view
/templatescriptimport { mapState } from vuex//引入mapStateexport default {computed: mapState({// 从state中拿到数据 箭头函数可使代码更简练userName: state state.userName,})}
/script 2当映射的计算属性名称与 state 的子节点名称相同时可以给 mapState 传一个字符串数组
templateviewtext{{$store.state.msg}}/texttext{{userName}}/textview{{msg}}{{userName}}/view/view
/templatescriptimport { mapState } from vuex//引入mapStateexport default {computed: mapState([msg,userName])}
/script 五、网络请求 这里小编用天行API为实例 天行数据TianAPI - 开发者API数据平台 1、封装请求
创建utils文件夹》创建request.js文件
const instance (url,data,header,callback) {const BASE_URL https://apis.tianapi.comuni.request({url: BASE_URL url,data,header,success: callback});
}
export default instance;
2、细化每个接口的配置
import instance from ../utils/request.js// 获取用户信息GET
export function getTianGou(data,callback){return instance(/tiangou/index,data,{},callback)
}
3、实例调用
scriptimport {getTianGou} from ../../api/user.jsimport instance from ../../utils/request.jsexport default {onLoad() {// 跳过第2步直接调用instance(/tiangou/index, {key: //data传参}, {}, (res) {console.log(res);}),// 细化接口配置后的调用getTianGou({key: //data传参}, (res) {console.log(res);})},}
/script 六、媒体上传图片
1、uni.chooseImage(OBJECT)
参数介绍
①count最多可以选择的图片张数默认9
②sizeTypeoriginal 原图compressed 压缩图默认二者都有
uni.chooseImage({count: 6, //默认9sizeType: [original, compressed], //可以指定是原图还是压缩图默认二者都有sourceType: [album], //从相册选择success: function (res) {console.log(JSON.stringify(res.tempFilePaths));}
});2、代码实例
templateview!-- 媒体图片 --button typedefault clickupImage上传图片/button{{imgArr}}image v-foritem in imgArr :keyitem :srcitem mode/image/view
/templatescriptexport default {data() {return {imgArr:[]}},methods: {// 上传图片事件upImage(){uni.chooseImage({count:6,success:res {console.log(res.tempFilePaths);console.log(this.imgArr);this.imgArr res.tempFilePaths}})}}}
/script
