从0入门uni-app

参考网址

1 uni与html的区别  https://www.jianshu.com/p/2160b8193282

2 uni路由传参框架 https://www.jianshu.com/p/f3876ab38dc0

3 使用vscode写uni https://www.jianshu.com/p/74c06e649e71 (我没这么干 只是vs写 hublid展示 )

1/ 先搭架子~  因为实在习惯vscode  所以使用vs code 自动保存写+hbuilder运行的模式。（hbulider内置这个刷新可以实时同步挺好的 但是没有保存/ 我没开发出来这些用法确实有点gg哦)

从pages开始  设置个启动页

 

现在是桌面上的new文件夹中了~  

用掉后就把之前的删掉~ 

1/ 先搭架子~  因为实在习惯vscode  所以使用vs code 自动保存写+hbuilder运行的模式。（hbulider内置这个刷新可以实时同步挺好的 但是没有保存/ 我没开发出来这些用法确实有点gg哦)

从pages开始  设置个启动页

pages": [
{
"path":"pages/index/index",
"style": {
"navigationBarTitleText":"uni-app"
}
}
QAQ底部栏的切换其实也可以直接这样进入
但是OAO！一定要确保，图标路径是对的、页面path没错
这个倒是简单，因为你只了
"tabBar": {
"color":"#DBDCE4",
"selectedColor":"#E8984E",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list": [{
"pagePath":"pages/index/index",
"iconPath":"static/icon3.png",
"selectedIconPath":"static/icon1.png",
"text":"首页"
},

 

 

2/ 图片怎么自适配？ 0 0 (对ipad）

（1） 直接 mode="widthFix"

（2) 之前是用upx   现在推荐rpx(自从hbulider 2.0）

看起来没适配 （在火狐里），可能只是因为没刷新~

与传统pc端/手机 直接h5做相比  传统的750需要除以2现在不用了

现在只要按原样750rpx即可

不过注意，在高度和字体大小还是不要用rpx~

3/ 使用scss~ 

uni-app里可以直接用

<style lang="scss" scoped> 就好了

但是，hbulider里面要安装一个插件不然hbulider自己会报错（好傲娇啊

4/ 使用路由~ 

先搞懂一下路由好吗！！！！  看https://www.jianshu.com/p/f3876ab38dc0 讲的蛮好  其实直接去dcloud里面找也可以（但是官方文档不太讨好。。。）

https://uniapp.dcloud.io/component/navigator 

（1）uni-app 页面路由全部交给框架统一管理，其实也相当于在pages.json里面，与vue router不同。

（2）两种方式：使用navigator组件跳转、调用API跳转。

具体是

1 uni.navigateTo({   url:' '  })

2   呢其实也就是给改成了navigator

open-type="redirect" 

hover-class="other-navigator-hover">

（3）页面栈~  【注意层级关系，返回关系，注意tabBar关系】

getCurrentPages()  获取当前页面栈的实例 不过不要在这里改~ 会返回阶层失误呀

从1.2开始直接 往下全复制来好了 (此处有个表格~—— 

 

navigateTo, redirectTo 只能打开非 tabBar 页面。

• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。
每个页面实例的方法属性列表如下：

方法	描述	平台说明
page.$getAppWebview()	获取当前页面的webview对象实例	5+App
page.route	获取当前页面的路由	-

uni-app 在 getCurrentPages()获得的页面里内置了一个方法 $getAppWebview() 可以获取当前页面的webview对象实例，从而获得 webview 的 style、id等属性，也可设置 webview 的 style。注意：此方法仅 5+app 支持。

(4) 传参 

说明：页面生命周期的onLoad(）监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）。如：

• 页面 1 传递参数

 

//页面跳转并传递参数
uni.navigateTo({
    url: 'page2?name=liy&message=Hello'
});

页面2接受参数

onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数 console.log(option.name); //打印出上个页面传递的参数。 console.log(option.message); //打印出上个页面传递的参数。 } 

太长会失败哦~ 可以用【窗体通信】【全局变量】encodeURIComponent的解决

=============================

如果是数据集：有点麻烦~

1 <括号格式> 我们传过去的是list 然后

data(){           return{             

xxxList:[     

{ "aa":"aa",  "bb":"bb"  }, 后面的括号一一配对 就不写了0 0 

2 <进行传送>

先json解析！ var processList = JSON.stringify(this.processList); 然后正常传送！uni.navigateTo({ url: 'new-page2?processList=' + processList })

3<接收>：

onLoad(options){ if(options.processList){ this.processList = JSON.parse(options.processList); console.log("onLoad-processList3:" + JSON.stringify(this.processList));

就是先parse 再stringify 不知道下面这个是上面

====================醒目  json还没搞懂=====================

const item = JSON.parse(decodeURIComponent(option.item)); 

5/ flex套flex套flex

 justify-content:space-between 不起作用？不是设置宽度的问题，可能只是你套的太多 没给到对的人！~

6/ 还是期待传入数据~ 

那么用v-for 

 v-for 只是不能写在根元素.. 因为写v-for的这个元素 会跟着整体一起开始循环  会生成好多qwq  反正外面套一个总归是 好的 

回到老地方~ 事实证明！！！！！！！之前那样写是不行的？？或者是之前的class是有类了的  而现在   要加引号好吗

<text :class="item.checked?'checked':'uncheck'">

{{item.title}}

7/ gitlab~ 

要切换分支  发现只有master分支怎么办?  其他的没有下载地址呀!

这样  git clone -b 分支名+仓库地址

仓库地址是外面的大的。

如果直接git clone  是会默认master的。

可以看 https://blog.csdn.net/weixin_42289193/article/details/81357468

git还有个回退的功能~ 

查看本地分支  $ git branch  (画*的大概就 是你处于

切换分支 $ git checkout dev

8/ 背景色(全局)

已知 我们要么在app.vue里面加

要么在uni.scss的全局变量里面加

pages.json按说也可以(好像没生效...) 

 

8/ 别有事没事就去怪flex~ 

仔细看看是不是你的结构写错了鸭!

tab页面哪里  需要switchTab  navigte to是不行的~ (也不是因为页面结构 其他的都正确 想想应该不是因为自己

 

 

9/  小问题!!!

行内元素设置padding，margin上下是无效的，左右是有效的

margin塌陷: 垂直的两块  确实会  所以别设置30+30 直接设置一个60。不仅如此，除了垂直之外…… 

可以加入浮动，或者display:inline-block; 来解决、可能还要加上 display:inline-block; zoom:1 什么滴~ 不过也还好吧

 

 

 

Vue命名规范(忽然高亮  (不过 这些更偏向组件  我单文件可能都没这么明显? 0 0

1 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。 

2 基础组件名  应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

3 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。这不意味着组件只可用于一个单页面，而是每个页面只使用一次  如tabber 什么滴

4 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

5 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

 

 

 

元素上使用的区别，见 https://www.jianshu.com/p/2160b8193282  也是直接复制下来好了

蒲公英（网站）

使用hbiluder 云打包， 打包好之后下根据链接  载app 上传蒲公英即可用页面发型