银财中国网
uni-app②
创始人
2024-05-25 18:25:26
0次

文章目录

  • 二、微信小程序简介（一）
    • 文档相关
    • 开发者工具
      • 使用
      • 小程序代码构成
      • 小程序基本操作
  • 三、uniapp 开发规范
    • uniapp 开发环境
      • 开发工具
      • 下载 HBuilderX
    • 工程搭建
    • 项目运行
      • 浏览器运行
  • 四、组件
    • 基础组件
      • 基础组件列表
      • 组件公共属性集合
    • 扩展组件
    • 自定义组件
  • UNI-ICON
    • 五、基础 API
      • API 列表
    • 页面布局相关
    • uniapp 生命周期
      • 应用生命周期
      • 页面生命周期
      • 组件生命周期
    • uniApp 特色
      • 条件编译
        • 插件安装

二、微信小程序简介（一）

文档相关

  1. 开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
  2. 微信公众平台：https://mp.weixin.qq.com/

开发者工具

​ 下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用

必选项处理

在这里插入图片描述

appID 获取

微信公众平台进行 appID 获取

在这里插入图片描述

小程序代码构成

参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#JSON-%E9%85%8D%E7%BD%AE

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

小程序基本结构

{userInfo.avatarUrl}}" background-size="cover">{{userInfo.nickName}}{{motto}}

小程序基本操作

  • 配置信息 app.json

    • 全局配置 -> https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

      {"pages": ["pages/index/index", "pages/logs/index"],"window": {"navigationBarTitleText": "Demo"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/logs/index","text": "日志"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true
}

    • 页面配置 app.json

      {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "微信接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light"
}

  • 全局生命周期函数 app.js

      /*** 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/onLaunch: function () {},/*** 当小程序启动，或从后台进入前台显示，会触发 onShow*/onShow: function (options) {},/*** 当小程序从前台进入后台，会触发 onHide*/onHide: function () {},/*** 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/onError: function (msg) {}
    • 页面生命周期函数 -> https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
     onLoad: function(options) {// 页面创建时执行},onShow: function() {// 页面出现在前台时执行},onReady: function() {// 页面首次渲染完毕时执行},onHide: function() {// 页面从前台变为后台时执行},onUnload: function() {// 页面销毁时执行},onPullDownRefresh: function() {// 触发下拉刷新时执行},onReachBottom: function() {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function() {// 页面滚动时执行},onResize: function() {// 页面尺寸变化时执行}

定义组件

引用组件：在 json 文件

使用组件

  • 组件生命周期->https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

    Component({lifetimes: {created() {console.log('created,组件实例刚刚被创建好时， created 生命周期被触发')},attached() {console.log('组件实力进入页面节点树时候进行执行')},detached() {console.log('在组件实例被从页面节点树移除时执行')},},
})

  • 界面跳转

    • 新界面打开=>https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

      调用 API wx.navigateTo
历史记录椎
使用组件

    • 页面重定向

      调用 API wx.redirectTo
使用组件

    • 页面返回

      调用 API wx.navigateBack
使用组件
用户按左上角返回按钮

    • Tab 切换

      调用 API wx.switchTab
使用组件 
用户切换 Tab

    • 重启动

      调用 API wx.reLaunch
使用组件

  • 数据绑定

    {{message}}

    Page({data: {message: 'hello world',},
})

  • 条件渲染

    {isShow}}">条件判断显示

    Page({data:{isShow:false}
})

  • 列表渲染

    {list}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.name}}


    Page({data: {list: [{ name: 'a' }, { name: 'b' }],},
})

    三、uniapp 开发规范

    • 页面文件遵循 Vue 单文件组件（SFC）规范

    • 组件标签靠近小程序规范 =>https://uniapp.dcloud.io/component/README

    • 接口能力（JS API）靠近微信小程序规范 => https://uniapp.dcloud.io/api/README

      uni.getStorageInfoSync()

    • 数据绑定事件处理同 Vue.js 规范

    • 兼容多端运行，使用 flex 布局进行开发

    uniapp 开发环境

    开发工具

    uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：

    • 模板丰富
    • 完善的智能提示
    • 一键运行

    下载 HBuilderX

    1. 访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html
    2. 点击首页的 DOWNLOAD 按钮
    3. 选择下载 正式版/alpha -> App 开发版
    4. 将下载的 zip包 进行解压缩
    5. 将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）
    6. 双击 HBuilderX.exe 即可启动 HBuilderX
    7. 详细安装文档：=> https://hx.dcloud.net.cn/Tutorial/install/windows

    工程搭建

    1. 文件 -> 新建 -> 项目
      在这里插入图片描述

    2. 填写项目基本信息
      在这里插入图片描述

    3. 项目创建成功
      在这里插入图片描述

    基本目录结构

    项目名称
----【pages】    内部存放所有页面
----【static】   存放所有静态资源，比如图片，字体图标
----【unpackage】存放所有打包生成后的文件
----app.vue     应用配置，用来配置App全局样式以及监听 应用生命周期
----main.js			Vue初始化入口文件
----mainfast.json  配置应用名称、appid、logo、版本等打包信息
----pages.json    配置页面路由、导航条、选项卡等页面类信息
----uni.scss      用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

    项目运行

    浏览器运行

在这里插入图片描述

### 小程序运行1. 填写自己的微信小程序的 AppID：

在这里插入图片描述

2. 在 HBuilderX 中，配置“微信开发者工具”的**安装路径**：

在这里插入图片描述

3. 在微信开发者工具中，通过 `设置 -> 安全设置` 面板，开启“微信开发者工具”的**服务端口**：

在这里插入图片描述

4. 在 HBuilderX 中，点击菜单栏中的 `运行 -> 运行到小程序模拟器 -> 微信开发者工具`，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

在这里插入图片描述

5. 初次运行成功之后的项目效果：

在这里插入图片描述

### app 真机运行> 确保你的手机与电脑是在同一个局域网下面1. 手机开启开发者模式
2. 选择数据管理
3. hbuildeX 选择真机运行
4. 等待基座安装
5. 安装完成手机运行项目### IOS 模拟器运行1. Xcode 下载
2. 定义版本进行模拟器运行***

四、组件

文档参考地址：https://uniapp.dcloud.net.cn/component/

基础组件

基础组件在 uni-app 框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如组件。

组件演示参考地址 => https://hellouniapp.dcloud.net.cn/pages/component/view/view

基础组件列表

  • 视图容器
    • view 视图容器，类似于 html 中的 div
    • scroll-view 可滚动试图容器 => https://uniapp.dcloud.net.cn/component/scroll-view
    • swiper 滑块视图容器，比如用于轮播 banner
  • 基础内容
    • icon 图标 => uni-icons
    • text 文字
    • rich-text 文字 （可以解析标签）
    • progress 进度条
  • 表单组件（Form）
    • button 按钮
    • checkbox 多项选择器
    • editor 富文本输入框
    • form 表单
    • input 输入框
    • label 标签
    • picker 弹出式聊表选择器
    • picker-view 窗体内嵌入式聊表选择器
    • radio 单项选择器
    • slider 滑动选择器
    • switch 开关选择器
    • textarea 多行文本输入框
  • 路由与页面跳转（Navigation）
    • navigator 页面链接，类似于 html 中的 a 标签
  • 媒体组件
    • audio 音频
    • camera 相机
    • image 图片
    • video 视频

组件公共属性集合

在这里插入图片描述

除了上述公共属性，还有一类特殊属性以v-开头，称之为 vue 指令，如 v-if、v-else、v-for、v-model。

扩展组件

Demo 地址：https://hellouniapp.dcloud.net.cn/pages/component/scroll-view/scroll-view

参考地址：https://ext.dcloud.net.cn/search?q=uni-icons

自定义组件

  1. componets 文件夹下定定义组件
  2. 页面引用组件，无需倒入适量，直接使用即可
  3. 其他操作（组件传值，事件绑定同 vue）

UNI-ICON

插件市场 --> 搜索 uni-icons --> uni-icons 图标 -->

小程序的域名处理：

在小程序—>开发管理—>开发设置—>服务器域名

五、基础 API

参考地址：https://uniapp.dcloud.net.cn/api/README

API 列表

  • 网络请求

    • uni.request 发起网络请求

      为了解决 uni.request 网络请求 API 相对简单的问题，可使用@escook/request-miniprogram 进行网路请求的处理

      参考地址：https://www.npmjs.com/package/@escook/request-miniprogram

      在小程序中，无法使用 fetch 及 axios 进行网络请求发送

      测试接口地址：https://study.duyiedu.com/api/herolist

  • 上传、下载

    • uni.unloadFile 上传文件 => https://uniapp.dcloud.net.cn/api/request/network-file
    • uni.downloadFile 下载文件

  • 图片处理

    • uni.chooseImage 从相册选择图片，或者拍照 =>https://uniapp.dcloud.net.cn/api/media/image?id=chooseimage
    • uni.previewImage 预览图片
    • uni.getImageInfo 获取图片信息

  • 数据缓存 => https://uniapp.dcloud.net.cn/api/storage/storage?id=setstorage

    • uni.getStorage 异步获取本地数据缓存
    • uni.getStorageSync 同步获取本地数据缓存
    • uni.setStorage 异步设置本地数据缓存
    • uni.setStorageSync 同步设置本地数据缓存
    • uni.removeStorage 异步删除本地数据缓存
    • uni.reoveStorageSync 同步删除本地数据缓存

  • 交互反馈 => https://uniapp.dcloud.net.cn/api/ui/prompt?id=showtoast

    • uni.showToast 显示提示框
    • uni.showLoading 显示加载提示框
    • uni.hideToast 隐藏提示框
    • uni.hideLoading 隐藏加载提示框
    • uni.showModal 显示模态框
    • uni.showActionSheet 显示菜单列表

  • 路由

    • uni.navigateTo 保留当前页面，跳转到应用内某个界面，使用 uni.navigateBack 返回原页面
    • uni.redirectTo 关闭当前界面，跳转到应用内的某个界面
    • uni.reLaunch 关闭所有界面，打开应用内的某个界面
    • uni.switchTab 跳转到 tab Bar 页面

页面布局相关

page

页面容器 css 属性

page: {height: 100%;background-color: red;
}

尺寸单位

可使用单位：px rpx,upx, rem vh vw

外部样式文件引入

同 vue 使用相同

uniapp 生命周期

**参考地址：**https://uniapp.dcloud.net.cn/collocation/frame/lifecycle?id=应用生命周期

应用生命周期

  • onLaunch 初始化完成时触发（全局 🈯️ 触发一次）

  • onShow uni-app 启动，或从后台进入前台显示

  • onHide 当 uni-app 应用从前台进入后台

    只能在 App.vue 里面进行监听，在其他界面监听无效

页面生命周期

  • onLoad 监听页面加载（可获取上个界面传递的参数）
  • onShow 监听页面显示，每次出现在屏幕上都进行触发
  • onReady 监听页面初次渲染完成
  • onHide 监听页面隐藏
  • onUnload 监听页面卸载
  • onReachBottom 页面滚动到底部事件

组件生命周期

  • beofreCreate
  • created
  • boforeMount
  • mounted
  • boforeDestroy
  • destroyed

uniApp 特色

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

语法
在这里插入图片描述

取值

在这里插入图片描述

条件编译支持的文件

  • .vue
  • .js
  • .css
  • pages.json
  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

条件编译是利用注释实现的，在不同语法里注释写法不一样，js 使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 ；

插件安装

  1. scss 安装

可以使用多种预编译处理器进行安装使用，以 scss 文件为例

下载地址：https://ext.dcloud.net.cn/plugin?name=compile-node-sass

在这里插入图片描述

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：java8函数式接口分布式事务简单实现方式

下一篇：TCP协议原理一

相关内容

热门资讯

喜欢穿一身黑的男生性格（喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识，其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思（思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思，以及思春和发春是什么意思对应的知识点，希望对各位有所帮助，...
网络用语zl是什么意思（zl是... 今天给各位分享网络用语zl是什么意思的知识，其中也会对zl是啥意思是什么网络用语进行解释，如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?，以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找（华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识，其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用（应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识，其中也会对应用助手怎么添加微信进行解释，如果能...
家里可以做假山养金鱼吗（假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识，其中也会对假山能放鱼缸里吗进行解释，如果能碰巧解...
四分五裂是什么生肖什么动物（四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物，以及四分五裂打一生肖是什么对应的知识点，希...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语，以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活（美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识，其中也会对美团联名卡审核未通过进行解释，如果能...