文章目录

二、微信小程序简介（一）
- 文档相关
- 开发者工具
- - 使用
  - 小程序代码构成
  - 小程序基本操作
三、uniapp 开发规范
- uniapp 开发环境
- - 开发工具
  - 下载 HBuilderX
- 工程搭建
- 项目运行
- - 浏览器运行
四、组件
- 基础组件
- - 基础组件列表
  - 组件公共属性集合
- 扩展组件
- 自定义组件
UNI-ICON

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

文档相关

开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
微信公众平台：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

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

小程序基本结构

<view class="container">
    <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}">获取头像昵称</button>
        <block wx:else>
            <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
            <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
    </view>
    <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
    </view>
</view>

小程序基本操作

配置信息 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
历史记录椎
使用组件 <navigator open-type="navigateTo" url=""/>

页面重定向

调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>

页面返回

调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮

Tab 切换

调用 API wx.switchTab
使用组件 <navigator open-type="switchTab"/>
用户切换 Tab

重启动

调用 API wx.reLaunch
使用组件 <navigator open-type="reLaunch"/>

数据绑定

<view>{{message}}</view>

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

条件渲染

<view wx:if="{{isShow}}">条件判断显示</view>

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

列表渲染

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

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

三、uniapp 开发规范

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

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

<template>
    <view> 页面内容 </view>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {},
}
</script>

<style></style>

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

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

<template>
    <view @click="onClickFn"> 点击事件绑定 </view>
</template>

<script>
export default {
    methods: {
        onClickFn() {
            console.log('click事件')
        },
    },
}
</script>

<style lang="scss" scoped></style>

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

uniapp 开发环境

开发工具

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

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

下载 HBuilderX

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

工程搭建

文件 -> 新建 -> 项目
填写项目基本信息
项目创建成功

基本目录结构

项目名称
----【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 框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如<view>组件。

组件演示参考地址 => 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

自定义组件

componets 文件夹下定定义组件
页面引用组件，无需倒入适量，直接使用即可
其他操作（组件传值，事件绑定同 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 模板里使用 ；

插件安装

scss 安装

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

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

在这里插入图片描述

uni-app②

文章目录

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

文档相关

开发者工具

使用

小程序代码构成

小程序基本操作

三、uniapp 开发规范

uniapp 开发环境

下载 HBuilderX

工程搭建

项目运行

四、组件

基础组件

基础组件列表

组件公共属性集合

扩展组件

自定义组件

UNI-ICON

五、基础 API

API 列表

页面布局相关

uniapp 生命周期

应用生命周期

页面生命周期

组件生命周期

uniApp 特色

条件编译

插件安装

相关文章