uni-app工程搭建②

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

文档相关

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 脚本逻辑文件

小程序基本结构

<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

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

自定义组件

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