uni-app.js开发跨平台应用的前端框架教程，新手必看
发表时间：2023-09-15 13:00:23
文章来源：炫佑科技
浏览次数：224
菏泽炫佑科技
uni-app.js开发跨平台应用的前端框架教程，新手必看
本教程的目的就是以通俗易懂的方式讲解流程，绕过所有对新手不友好的陷阱，实现超级快速上手。 主要目的是避免官方的很多陷阱。 毕竟刚开始研究的时候，确实感觉坑坑洼洼的头皮发麻，而且花了好几个小时。 很多网上的文档和官方的案例都是有问题的，这对于新手来说是一个非常沉重的打击。 出于这个原因，我决定编写这个必读的入门教程。
不过我已经完成了初步的探索，所以我决定整理这个教程。
不过学习的前提是你必须有 CSS 基础和 Vue 入门技能。 **次写教程后可能还不完整。 如果还有什么疑问，请留言，我会补充。
它非常详细和全面。 我希望你能保存它。
uni-app是一个使用Vue.js的工具
开发跨平台应用的前端框架，可以用来创建小程序、h5移动网页、安卓app、苹果app等，只要会Vue，了解基本的页面布局CSS知识，就可以轻松上手开始了。
但其中的陷阱实在是太多了，让人烦恼……
那么，我们现在就开始吧。 教程非常详细。 如果您有任何疑问，可以发表评论。 还有可能有些解决方案会因为官方更新而失效，不过有时间我会继续补充。
**步：安装开发工具 1.下载，官方地址：点击进入，选择app开发版本进行下载
2. 点击“工具”、“插件安装”，安装以下插件，这些插件与应用程序的运行、编译和控制台输出相关。
步骤2：项目创建 1.创建项目并使用框架
2、也可以查看插件商城下载需要的插件和整个项目页面（不过一般用不到，这只是入门教程）。 我使用的框架是一个比较漂亮的UI框架，可以进一步简化开发过程。 ，插件商城里还有其他UI框架，您可以根据自己的需求进行选择，插件市场地址：点击进入
3、如果你想快速安装插件或者创建项目，可以注册一个公众号，然后点击你要使用的项目详情，直接点击“使用导入插件”，然后按照根据提示。
第三步：实际项目实现（比如我想做一个聊天应用，但是还没有后端接口，想做前端全部） 1、以上步骤完成后，就可以得到一个这样的列表，重要的文件就是我标记的。 结果必须在项目开发过程中进行调整。 它存储公共头文件，pages存储所有页面模板，main.js主要用于定义全局块，pages.json定义页面的路径、使用的内容方法以及一些样式。
如何创建新的页面模板？ 这很简单。 只需在pages或其下级文件中创建一个vue文件，然后在pages.json文件中的pages数组中定义即可。
2.底部导航的实现（框架默认演示的底部导航和页面切换方法是一个很大的坑），默认的方法是使用main.js全局定义的方法，代码如下：
import basics from './pages/basics/home.vue'
Vue.component('basics',basics)
import components from './pages/component/home.vue'
Vue.component('components',components)
import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)
但这种方式带来的一个明显的问题是，页面内部的js方法会出现大量的效果，甚至完全不可用。 我花了整整一两个小时才意识到这是一个巨大的陷阱。 定制底部对于新手来说还是有点复杂。 简单的方法应该是删除main.js中定义全局页面切换的代码，创建页面模板后，从pages.json中定义。
然后，通过上面的屏幕截图，您可以看到“pages 数组中的**项代表应用程序启动页面”这句话。 不要相信这里。 虽然在端调试时**项确实是启动页面，但在调试微信小程序时，真正的启动页面是在这里定义的。
"usingComponts": true,
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "表单", //模式名称
"path": "pages/component/form", //启动页面
"query": "" //启动参数
}
]
}
上面的代码是pages.json，向下滚动就可以看到。
那么我们回到*初的问题，如何实现底部导航。 答案也在pages.json 中。 使用以下代码定义底部导航。 该数组与pages处于同一级别，可以添加在pages.json的末尾。
"tabBar": {
//"color": "#ffffff", //未选中的菜单文字颜色
"selectedColor": "#1cbbb4", //选中时的菜单文字颜色
"borderStyle": "black",
"backgroundColor": "#ffffff", //背景
"list": [{
"text": "首页",
"pagePath": "pages/post/home",
"iconPath": "static/tabbar/home.png", //图标默认
"selectedIconPath": "static/tabbar/home_cur.png" //页面被点击选中后
},
{
"text": "发现",
"pagePath": "pages/find/home",
"iconPath": "static/tabbar/find.png",
"selectedIconPath": "./static/tabbar/find_cur.png"
},
{
"text": "分类",
"pagePath": "pages/post/category",
"iconPath": "./static/tabbar/category.png",
"selectedIconPath": "./static/tabbar/category_cur.png"
},
{
"text": "我的",
"pagePath": "pages/user/home",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "./static/tabbar/user_cur.png"
}
]
}这才是实现底部导航的正确方法。
3、项目布局快速建设。 根据UI组件提供的布局，快速构建页面。 提供了大量的布局解决方案，都在pages文件夹中，在这里你可以找到各种常用的方法。 例如，如果你想实现这个聊天应用程序，你可以看到可以完全复制的组件。
比如/chat.vue，打开后点击上面的运行，选择内置浏览器运行，就会是一个完美的聊天页面。
另一个例子是/list.vue。 列表组件下面是聊天列表的情况。
然后还有一个更强大的东西，/.vue，打开后完全类似于微信联系人索引，而且这个页面还提供了头部导航和搜索框块，可以随意复制和迁移。
对于更多组件，只需查看默认模板文件，然后将其组合到您需要的页面即可。 如果没有你需要的布局，那么你就只能利用CSS知识自己打字了。
4、下拉刷新、底部刷新、弹出刷新的实现这里会遇到-view的巨大坑。 我认为在开发不复杂的项目时，-view标签完全可以放弃，不再使用。
要实现下拉刷新和触底刷新，其实很简单。 在pages.json的pages数组中，在需要实现效果的页面添加两行代码，大致如下：
{
"path": "pages/post/home",
"style": {
"enablePullDownRefresh": true, //开启下拉刷新
"onReachBottomDistance":300 //触底刷新，距离底部多少，开始执行
}
},
然后在打开的页面中添加如下方法：
onPullDownRefresh(){
let _this = this;
//用户下拉操作时执行的方法
},
onReachBottom() {
//触底后执行的方法，比如无限加载之类的
},
那么当你使用的时候，你会发现下拉刷新中的小球并不会自动消失，所以还有一个方法可以关闭下拉刷新。
uni.stopPullDownRefresh();
弹窗刷新方法通过以下代码实现：
//显示弹窗出来刷新的方法
uni.showLoading({
title: '加载中...',
mask: true
});
//关闭弹窗刷新方法
uni.hideLoading();
5、实现页面跳转参数传递。 在uni-app中，打开下级页面并传递页面参数，方法如下：
uni.navigateTo({
url: "跳转的路径地址"
})
如果要传递参数，以传递id为例：
uni.navigateTo({
url: "post?id=12";
})
在帖子页面中，接收方法如下：
onLoad(res) {
this.cid = res.cid;
},
它是判断页面是否已加载的方法。 res携带了浏览器的参数，所以以res.id的形式，可以从参数中获取到id的值。
6、页面请求方法、请求接口、渲染列表或请求接口的封装和案例，完成验证。
执行此操作时，首先下载以下文件，这些文件是现成的封装方法：
将解压后的utils拖入项目中，然后在页面中引入，如下：
var API = require('../../utils/api');
var Net = require('../../utils/net');
使用的方法如下，首先是GET方法：
Net.request({
url: "请求地址",
method:"GET",
success: function(res) {
// 请求成功后执行的方法
},
fail:function(res){
// 请求失败后执行的方法
}
})
然后是POST方法：
Net.request({
url: "请求地址",
method:"POST",
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: function(res) {
// 请求成功后执行的方法
},
fail:function(res){
// 请求失败后执行的方法
}
})
7、本地数据存储插件的安装与实现，字段、数组、json的本地存储。 这里，你需要使用一个 mp-。 其目的是为了在各种小程序平台上实现。 按照上面的教程安装到项目中后，使用方法如下。 这里我直接复制了官方教程：
import { localStorage } from '../../js/mp-storage/index.js'
// 推荐用法
localStorage.setItem('test', '123')
console.log(localStorage.getItem('test')) // 123
// 不推荐用法
localStorage.test = '123'
console.log(localStorage.test) // 123
8. 使用 HTML 标签呈现文本内容。 比如我想获取一条带有段和代码的新闻详情，在正常的vue输出形式中，会直接返回一堆真实的代码。 所以这里我使用的是富文本插件。 以同样的方式安装插件，然后使用如下：
只需将文章类的富文本内容分配给该字段即可。
9. 自定义标题。 这是一个常用的东西，因为框架只提供了一种类型的头代码，就是之前提到的//cu-.vue。 打开这个文件，你可以看到框架的默认头。 代码，但是在正常的开发项目过程中，头部是不断变化的，所以需要自己定义更多的样式。 除了直接修改这个文件之外，还可以添加一个头文件。
例如，如果我创建一个名为 cu-.vue 的新文件并在其中编写我自己的标头代码，那么我可以向 main.js 添加两行。
import cuheader from './colorui/components/cu_header.vue'
Vue.component('cu_header',cuheader)
但记住，在.vue'文件中，将*外层的类重命名为cu-，然后使用时以同样的方式替换cu-。 用法类似如下（根据实际情况更改）。
返回
{{title}}
10.动态修改系统导航栏的颜色。
这是一个很无语的地方。 如果你看了官方文档，你还没读懂，就会出现严重的错误，让你以为自己发现了一个bug，却无能为力。 这里的陷阱是动态设置导航栏的参数。 官方文档说会继承uni.r的设置。 其实这只是无稽之谈。 APP环境中的颜色根本不会继承上面的设置，基本上完全无效。 。
比如我想使用系统自带的导航栏，需要在右侧有一个图标按钮，我在page.json中的配置如下：
{
"path": "pages/friend/chat",
"style": {
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [{
"text": "\ueb9f",
"fontSize": "20",
"fontSrc": "/static/iconfont.ttf",
}]
},
}
}
},
应用需要动态设置导航栏的参数。 官方提供的默认代码如下：
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
},
})
这是官方的描述，就是这么说的。 事实上，也并非完全错误。 这些设置在h5下确实会继承app开发，但在app下无效：
正确的做法是添加如下附加代码来设置参数：
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewButtonStyle(0, {
"color": "颜色代码",
});
// #endif
补充相关文章
连接实例、发送接收数据并存储到本地，详细教程
连接oss实现图片上传
数据post请求后台无法接收问题
苹果iOS上免签证打包带分发，改变思维和玩法
实现国际多语言切换，原理讲解
如果您需要定制化app开发，或者想学习讨论，可以加入这个博客交流群：
本教程的目的就是以通俗易懂的方式讲解流程，绕过所有对新手不友好的陷阱，实现超级快速上手。 主要目的是避免官方的很多陷阱。 毕竟刚开始研究的时候，确实感觉坑坑洼洼的头皮发麻，而且花了好几个小时。 很多网上的文档和官方的案例都是有问题的，这对于新手来说是一个非常沉重的打击。 出于这个原因，我决定编写这个必读的入门教程。
不过我已经完成了初步的探索，所以我决定整理这个教程。
不过学习的前提是你必须有 CSS 基础和 Vue 入门技能。 **次写教程后可能还不完整。 如果还有什么疑问，请留言，我会补充。
它非常详细和全面。 我希望你能保存它。
uni-app是一个使用Vue.js的工具
开发跨平台应用的前端框架，可以用来创建小程序、h5移动网页、安卓app、苹果app等，只要会Vue，了解基本的页面布局CSS知识，就可以轻松上手开始了。
但其中的陷阱实在是太多了，让人烦恼……
那么，我们现在就开始吧。 教程非常详细。 如果您有任何疑问，可以发表评论。 还有可能有些解决方案会因为官方更新而失效，不过有时间我会继续补充。
**步：安装开发工具 1.下载，官方地址：点击进入，选择app开发版本进行下载
2. 点击“工具”、“插件安装”，安装以下插件，这些插件与应用程序的运行、编译和控制台输出相关。
步骤2：项目创建 1.创建项目并使用框架
2、也可以查看插件商城下载需要的插件和整个项目页面（不过一般用不到，这只是入门教程）。 我使用的框架是一个比较漂亮的UI框架，可以进一步简化开发过程。 ，插件商城里还有其他UI框架，您可以根据自己的需求进行选择，插件市场地址：点击进入
3、如果你想快速安装插件或者创建项目，可以注册一个公众号，然后点击你要使用的项目详情，直接点击“使用导入插件”，然后按照根据提示。
第三步：实际项目实现（比如我想做一个聊天应用，但是还没有后端接口，想做前端全部） 1、以上步骤完成后，就可以得到一个这样的列表，重要的文件就是我标记的。 结果必须在项目开发过程中进行调整。 它存储公共头文件，pages存储所有页面模板，main.js主要用于定义全局块，pages.json定义页面的路径、使用的内容方法以及一些样式。
如何创建新的页面模板？ 这很简单。 只需在pages或其下级文件中创建一个vue文件，然后在pages.json文件中的pages数组中定义即可。
2.底部导航的实现（框架默认演示的底部导航和页面切换方法是一个很大的坑），默认的方法是使用main.js全局定义的方法，代码如下：
import basics from './pages/basics/home.vue'
Vue.component('basics',basics)
import components from './pages/component/home.vue'
Vue.component('components',components)
import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)
但这种方式带来的一个明显的问题是，页面内部的js方法会出现大量的效果，甚至完全不可用。 我花了整整一两个小时才意识到这是一个巨大的陷阱。 定制底部对于新手来说还是有点复杂。 简单的方法应该是删除main.js中定义全局页面切换的代码，创建页面模板后，从pages.json中定义。
然后，通过上面的屏幕截图，您可以看到“pages 数组中的**项代表应用程序启动页面”这句话。 不要相信这里。 虽然在端调试时**项确实是启动页面，但在调试微信小程序时，真正的启动页面是在这里定义的。
"usingComponts": true,
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "表单", //模式名称
"path": "pages/component/form", //启动页面
"query": "" //启动参数
}
]
}
上面的代码是pages.json，向下滚动就可以看到。
那么我们回到*初的问题，如何实现底部导航。 答案也在pages.json 中。 使用以下代码定义底部导航。 该数组与pages处于同一级别，可以添加在pages.json的末尾。
"tabBar": {
//"color": "#ffffff", //未选中的菜单文字颜色
"selectedColor": "#1cbbb4", //选中时的菜单文字颜色
"borderStyle": "black",
"backgroundColor": "#ffffff", //背景
"list": [{
"text": "首页",
"pagePath": "pages/post/home",
"iconPath": "static/tabbar/home.png", //图标默认
"selectedIconPath": "static/tabbar/home_cur.png" //页面被点击选中后
},
{
"text": "发现",
"pagePath": "pages/find/home",
"iconPath": "static/tabbar/find.png",
"selectedIconPath": "./static/tabbar/find_cur.png"
},
{
"text": "分类",
"pagePath": "pages/post/category",
"iconPath": "./static/tabbar/category.png",
"selectedIconPath": "./static/tabbar/category_cur.png"
},
{
"text": "我的",
"pagePath": "pages/user/home",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "./static/tabbar/user_cur.png"
}
]
}这才是实现底部导航的正确方法。
3、项目布局快速建设。 根据UI组件提供的布局，快速构建页面。 提供了大量的布局解决方案，都在pages文件夹中，在这里你可以找到各种常用的方法。 例如，如果你想实现这个聊天应用程序，你可以看到可以完全复制的组件。
比如/chat.vue，打开后点击上面的运行，选择内置浏览器运行，就会是一个完美的聊天页面。
另一个例子是/list.vue。 列表组件下面是聊天列表的情况。
然后还有一个更强大的东西，/.vue，打开后完全类似于微信联系人索引，而且这个页面还提供了头部导航和搜索框块，可以随意复制和迁移。
对于更多组件，只需查看默认模板文件，然后将其组合到您需要的页面即可。 如果没有你需要的布局，那么你就只能利用CSS知识自己打字了。
4、下拉刷新、底部刷新、弹出刷新的实现这里会遇到-view的巨大坑。 我认为在开发不复杂的项目时，-view标签完全可以放弃，不再使用。
要实现下拉刷新和触底刷新，其实很简单。 在pages.json的pages数组中，在需要实现效果的页面添加两行代码，大致如下：
{
"path": "pages/post/home",
"style": {
"enablePullDownRefresh": true, //开启下拉刷新
"onReachBottomDistance":300 //触底刷新，距离底部多少，开始执行
}
},
然后在打开的页面中添加如下方法：
onPullDownRefresh(){
let _this = this;
//用户下拉操作时执行的方法
},
onReachBottom() {
//触底后执行的方法，比如无限加载之类的
},
那么当你使用的时候，你会发现下拉刷新中的小球并不会自动消失，所以还有一个方法可以关闭下拉刷新。
uni.stopPullDownRefresh();
弹窗刷新方法通过以下代码实现：
//显示弹窗出来刷新的方法
uni.showLoading({
title: '加载中...',
mask: true
});
//关闭弹窗刷新方法
uni.hideLoading();
5、实现页面跳转参数传递。 在uni-app中，打开下级页面并传递页面参数，方法如下：
uni.navigateTo({
url: "跳转的路径地址"
})
如果要传递参数，以传递id为例：
uni.navigateTo({
url: "post?id=12";
})
在帖子页面中，接收方法如下：
onLoad(res) {
this.cid = res.cid;
},
它是判断页面是否已经加载的方法。 res携带了浏览器的参数，所以以res.id的形式uni-app.js开发跨平台应用的前端框架教程，新手必看，可以从参数中获取到id的值。
6、页面请求方法、请求接口、渲染列表或请求接口的封装和案例，完成验证。
执行此操作时，首先下载以下文件，这些文件是现成的封装方法：
将解压后的utils拖入项目中，然后在页面引入如下：
var API = require('../../utils/api');
var Net = require('../../utils/net');
使用的方法如下，首先是GET方法：
Net.request({
url: "请求地址",
method:"GET",
success: function(res) {
// 请求成功后执行的方法
},
fail:function(res){
// 请求失败后执行的方法
}
})
然后是POST方法：
Net.request({
url: "请求地址",
method:"POST",
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: function(res) {
// 请求成功后执行的方法
},
fail:function(res){
// 请求失败后执行的方法
}
})
7、本地数据存储插件的安装与实现，字段、数组、json的本地存储。 这里，你需要使用一个 mp-。 其目的是为了在各种小程序平台上实现。 按照上面的教程安装到项目中后，使用方法如下。 这里我直接复制了官方教程：
import { localStorage } from '../../js/mp-storage/index.js'
// 推荐用法
localStorage.setItem('test', '123')
console.log(localStorage.getItem('test')) // 123
// 不推荐用法
localStorage.test = '123'
console.log(localStorage.test) // 123
8. 使用 HTML 标签呈现文本内容。 比如我想获取一条带有段和代码的新闻详情，在正常的vue输出形式中，会直接返回一堆真实的代码。 所以这里我使用的是富文本插件。 以同样的方式安装插件，然后使用如下：
只需将文章类的富文本内容分配给该字段即可。
9. 自定义标题。 这是一个常用的东西，因为框架只提供了一种类型的头代码，就是之前提到的//cu-.vue。 打开这个文件，你可以看到框架的默认头。 代码，但是在正常的开发项目过程中，头部是不断变化的，所以需要自己定义更多的样式。 除了直接修改这个文件之外，还可以添加一个头文件。
例如，如果我创建一个名为 cu-.vue 的新文件并在其中编写我自己的标头代码，那么我可以向 main.js 添加两行。
import cuheader from './colorui/components/cu_header.vue'
Vue.component('cu_header',cuheader)
但记住，在.vue'文件中，将*外层的类重命名为cu-，然后使用时以同样的方式替换cu-。 用法类似如下（根据实际情况更改）。
返回
{{title}}
10.动态修改系统导航栏的颜色。
这是一个很无语的地方。 如果你看了官方文档，你还没读懂，就会出现严重的错误，让你以为自己发现了一个bug，却无能为力。 这里的陷阱是动态设置导航栏的参数。 官方文档说会继承uni.r的设置。 其实这只是无稽之谈。 APP环境中的颜色根本不会继承上面的设置，基本上完全无效。 。
比如我想使用系统自带的导航栏，需要在右侧有一个图标按钮，我在page.json中的配置如下：
{
"path": "pages/friend/chat",
"style": {
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [{
"text": "\ueb9f",
"fontSize": "20",
"fontSrc": "/static/iconfont.ttf",
}]
},
}
}
},
应用需要动态设置导航栏的参数。 官方提供的默认代码如下：
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
},
})
这是官方的描述，就是这么说的。 事实上，也并非完全错误。 这些设置在h5下确实会继承，但在app下无效：
正确的做法是添加如下附加代码来设置参数：
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewButtonStyle(0, {
"color": "颜色代码",
});
// #endif
补充相关文章
连接实例、发送接收数据并存储到本地，详细教程
连接oss实现图片上传
数据post请求后台无法接收问题
苹果iOS上免签证打包带分发，改变思维和玩法
实现国际多语言切换，原理讲解
如果您需要定制化app开发，或者想学习讨论，可以加入这个博客交流群：
本教程的目的就是以通俗易懂的方式讲解流程，绕过所有对新手不友好的陷阱，实现超级快速上手。 主要目的是避免官方的很多陷阱。 毕竟刚开始研究的时候，确实感觉坑坑洼洼的头皮发麻，而且花了好几个小时。 很多网上的文档和官方的案例都是有问题的，这对于新手来说是一个非常沉重的打击。 出于这个原因，我决定编写这个必读的入门教程。
不过我已经完成了初步的探索，所以我决定整理这个教程。
不过学习的前提是你必须有 CSS 基础和 Vue 入门技能。 **次写教程后可能还不完整。 如果还有什么疑问，请留言，我会补充。
它非常详细和全面。 我希望你能保存它。
uni-app是一个使用Vue.js的工具
开发跨平台应用的前端框架，可以用来创建小程序、h5移动网页、安卓app、苹果app等，只要会Vue，了解基本的页面布局CSS知识，就可以轻松上手开始了。
但其中的陷阱实在是太多了，让人烦恼……
那么，我们现在就开始吧。 教程非常详细。 如果您有任何疑问，可以发表评论。 还有可能有些解决方案会因为官方更新而失效，不过有时间我会继续补充。
**步：安装开发工具 1.下载，官方地址：点击进入，选择app开发版本进行下载
2. 点击“工具”、“插件安装”，安装以下插件，这些插件与应用程序的运行、编译和控制台输出相关。
步骤2：项目创建 1.创建项目并使用框架
2、也可以查看插件商城下载需要的插件和整个项目页面（不过一般用不到，这只是入门教程）。 我使用的框架是一个比较漂亮的UI框架，可以进一步简化开发过程。 ，插件商城里还有其他UI框架，您可以根据自己的需求进行选择，插件市场地址：点击进入
3、如果你想快速安装插件或者创建项目，可以注册一个公众号，然后点击你要使用的项目详情，直接点击“使用导入插件”，然后按照根据提示。
第三步：实际项目实现（比如我想做一个聊天应用，但是还没有后端接口，想做前端全部） 1、以上步骤完成后，就可以得到一个这样的列表，重要的文件就是我标记的。 结果必须在项目开发过程中进行调整。 它存储公共头文件，pages存储所有页面模板，main.js主要用于定义全局块，pages.json定义页面的路径、使用的内容方法以及一些样式。
如何创建新的页面模板？ 这很简单。 只需在pages或其下级文件中创建一个vue文件，然后在pages.json文件中的pages数组中定义即可。
2.底部导航的实现（框架默认演示的底部导航和页面切换方法是一个很大的坑），默认的方法是使用main.js全局定义的方法，代码如下：
import basics from './pages/basics/home.vue'
Vue.component('basics',basics)
import components from './pages/component/home.vue'
Vue.component('components',components)
import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)
但这种方式带来的一个明显的问题是，页面内部的js方法会出现大量的效果，甚至完全不可用。 我花了整整一两个小时才意识到这是一个巨大的陷阱。 定制底部对于新手来说还是有点复杂。 简单的方法应该是删除main.js中定义全局页面切换的代码，创建页面模板后，从pages.json中定义。
然后，通过上面的屏幕截图，您可以看到“pages 数组中的**项代表应用程序启动页面”这句话。 不要相信这里。 虽然在端调试时**项确实是启动页面，但在调试微信小程序时，真正的启动页面是在这里定义的。
"usingComponts": true,
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "表单", //模式名称
"path": "pages/component/form", //启动页面
"query": "" //启动参数
}
]
}
上面的代码是pages.json，向下滚动就可以看到。
那么我们回到*初的问题，如何实现底部导航。 答案也在pages.json 中。 使用以下代码定义底部导航。 该数组与pages处于同一级别，可以添加在pages.json的末尾。
"tabBar": {
//"color": "#ffffff", //未选中的菜单文字颜色
"selectedColor": "#1cbbb4", //选中时的菜单文字颜色
"borderStyle": "black",
"backgroundColor": "#ffffff", //背景
"list": [{
"text": "首页",
"pagePath": "pages/post/home",
"iconPath": "static/tabbar/home.png", //图标默认
"selectedIconPath": "static/tabbar/home_cur.png" //页面被点击选中后
},
{
"text": "发现",
"pagePath": "pages/find/home",
"iconPath": "static/tabbar/find.png",
"selectedIconPath": "./static/tabbar/find_cur.png"
},
{
"text": "分类",
"pagePath": "pages/post/category",
"iconPath": "./static/tabbar/category.png",
"selectedIconPath": "./static/tabbar/category_cur.png"
},
{
"text": "我的",
"pagePath": "pages/user/home",
"iconPath": "static/tabbar/user.png",
"selectedIconPath": "./static/tabbar/user_cur.png"
}
]
}这才是实现底部导航的正确方法。
3. Rapid of . Based on the by UI , the page is . a large of , all in the pages , where you can find used . For , if you want to this chat app, you can see the that can be .
For , /chat.vue, after it, click Run above, the built-in to run, and it will be a chat page.
is /list.vue. Under the list is the case of the chat list.
And then there is even more , /.vue, which when is to the index of , and this page also and box , which can be and at will.
For more , just look at the file, go there and put the page you need. If there is no you need, then you can only use CSS to type it .
4. The of pull-down , , and pop-up will the huge pit of -view here. I think that in the of that are not , the -view tag can be and no used.
To pull-down and -out , it is very . In the pages array of pages.json, add two lines of code to the page where the needs to be , which is as :
{
"path": "pages/post/home",
"style": {
"enablePullDownRefresh": true, //开启下拉刷新
"onReachBottomDistance":300 //触底刷新，距离底部多少，开始执行
}
},
Then on the page, add the :
onPullDownRefresh(){
let _this = this;
//用户下拉操作时执行的方法
},
onReachBottom() {
//触底后执行的方法，比如无限加载之类的
},
Then when you use it, you will find that the ball in the pull-down will not , so there is way to turn off the pull-down .
uni.stopPullDownRefresh();
The pop-up is with the code:
//显示弹窗出来刷新的方法
uni.showLoading({
title: '加载中...',
mask: true
});
//关闭弹窗刷新方法
uni.hideLoading();
5. of page jump . In uni-app, to open the lower-level page and page , the is as :
uni.navigateTo({
url: "跳转的路径地址"
})
If you want to pass , take id as an :
uni.navigateTo({
url: "post?id=12";
})
In the post page, the is as :
onLoad(res) {
this.cid = res.cid;
},
It is a to the page has been . Res the of the , so in the form of res.id, the value of the id can be from the .
6. and cases of page , , lists, or to .
When this , first the files, which are ready-made :
Drag the utils into the , and then it on the page as :
var API = require('../../utils/api');
var Net = require('../../utils/net');
The used is as , first is the GET :
Net.request({
url: "请求地址",
method:"GET",
success: function(res) {
// 请求成功后执行的方法
},
fail:function(res){
// 请求失败后执行的方法
}
})
Then the POST :
Net.request({
url: "请求地址",
method:"POST",
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: function(res) {
// 请求成功后执行的方法
},
fail:function(res){
// 请求失败后执行的方法
}
})
7. and of local data plug-in, local of , and json. Here, you need to use an mp-. Its is to it on small . After it into the to the above , the usage is as . Here I the :
import { localStorage } from '../../js/mp-storage/index.js'
// 推荐用法
localStorage.setItem('test', '123')
console.log(localStorage.getItem('test')) // 123
// 不推荐用法
localStorage.test = '123'
console.log(localStorage.test) // 123
8. of text with HTML tags. For , if I want to get a news with and codes, in the vue form, a bunch of real codes will be . So here I am using the rich text plug-in. the plug-in in the same way, and then use it as :
Just the rich text of the class to the field.
9. the . This is a used thing, the only one type of code, which is the //cu-.vue . Open this file and you can see the 's . code, but in the , the is ever-, so you need to more . In to this file, you can also add a .
For , if I a new file cu-.vue and write my own code in it, then I can add two lines to main.js.
import cuheader from './colorui/components/cu_header.vue'
Vue.component('cu_header',cuheader)
不过也记得，在.vue'这个文件，把*外层那个叫做cu-的class，改名为，然后使用的时候，也是同样的把cu-替换为，用法类似如下（根据实际情况改变）。
返回
{{title}}
10.动态修改系统导航栏的颜色。
这里是个非常无语的地方，官方的文档看了等于没看，而且还会严重的带误，让你认为发现了一个bug，并且对这个bug无可奈何。这里的坑是指动态的设置导航栏的参数，官方文档说会继承uni.r的设置，实际上是瞎几把乱讲，在APP环境下的颜色根本不会继承上述设置，基本等于完全无效。
比如我要使用系统自带导航栏，并且右侧需要一个图标按钮，那么我在page.json中的配置如下：
{
"path": "pages/friend/chat",
"style": {
"app-plus": {
"bounce": "none",
"titleNView": {
"buttons": [{
"text": "\ueb9f",
"fontSize": "20",
"fontSrc": "/static/iconfont.ttf",
}]
},
}
}
},
app要动态的设置导航栏的参数，使用官方提供的代码默认如下：
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#111111',
animation: {
duration: 0,
timingFunc: 'easeIn'
},
})
这里看官方的说明，是这么说的，实际上这里也没有完全错，在h5下确实会继承设置，但是app下无效：
正确的方式是额外加如下代码，设置参数：
// #ifdef APP-PLUS
var webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewButtonStyle(0, {
"color": "颜色代码",
});
// #endif
相关文章补充
连接实例，收发数据存储到本地，详细教程
对接oss，实现图片上传
数据post请求后台无法接收问题
苹果ios端免签打包带分发，转换思路玩法
实现国际化多语言切换，原理说明
需要定制app开发，或者想要学习讨论的，可以加本博客交流群：
