使用uni-app搭建微信小程序

0 问题待解决

• import { } 与否
• 为什么要封装
• 对齐问题
• 每次重启项目，sitemap就会消失
• 动态修改标题失效
• 图片问题多多 ：高度自适应 改成image固定高度，mode：aspectFill
• 微信小程序文档
• b站视频链接
• 后端接口文档

一、知识点

• uni-app 是一个使用 Vue.js语法来开发所有前端应用的框架
• 项目技术栈：js+vue+微信小程序+uni-app
• 750rpx = 屏幕宽度（微信小程序）
• 100vw = 屏幕宽度（H5）
• 100vh = 屏幕高度（H5）
• 微信小程序中不支持*通配符
• 出现奇怪的报错后，可以npm重启项目
• 原生的微信小程序不支持promise
• uni-api支持promise，请求返回值是个数组，无法实现项目“等待中”效果，因此要自行封装异步请求
  

二、基本语法

1. 数据展示

• 在 js 的 data 中定义数据
• 在 template中通过 { { 数据 }} 来显示
• 在标签的属性（自定义属性）上通过 :data-index='数据’来使用

2. 数据循环、条件编译、计算属性同vue语法

3. 事件传参（传入$event获取自定义属性）

思考：target 和 currentTarget的区别

<text data-id="myId" @click="showId($event)">点我显示id</text>

showId(event) {
   
	console.log(event.currentTarget.dataset.id)
}

4. 组件

1. 注册组件

• 创建组件页面 .vue文件（组件样式也在这里修改）
• import组件（注意不能用-，js中会当成减号）
• 注册到vue实例上，components: {}
• <template>中短横线形式，使用组件

2. 组件传参

1）父传子

• props属性和data同级，并不是在data里面！
• 为了父组件复用子组件

父组件
父组件中自定义属性mysrc（体现传值），右边内容若为变量，则须在mysrc前添加冒号

    <my-yuyan :mysrc="xuanyan" mytitle="渲言"></my-yuyan>
    <my-yuyan :mysrc="yuyan" mytitle="喻言"></my-yuyan>

  data() {
   
    return {
   
      xuanyan: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591198770665&di=3bdaf80f7bd15f03dfea55bf88e391a0&imgtype=0&src=http%3A%2F%2Fimglf5.nosdn0.126.net%2Fimg%2FbjZaRmVpWExkaE1ScFc3VzRjUW1INUJhcTcxVGNTcVF0VGpFYkxXelNiZWZnMW1SYjAzUFJBPT0.jpg%3FimageView%26thumbnail%3D500x0%26quality%3D96%26stripmeta%3D0%26type%3Djpg",
      yuyan: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591200770069&di=a90535dc0ff79617758b4ec32484e1bd&imgtype=0&src=http%3A%2F%2Fwx2.sinaimg.cn%2Flarge%2F59853be1ly1gff7y14skvj20c80c8dna.jpg"
    };
  },

子组件
（父组件所传值）需要在子组件中声明：props中当与父组件的自定义属性相同

    <view>
        <view>{
   {
   mytitle}}</view>
        <image class="yuyan" :src="mysrc"></image>
    </view>

export default {
   
     props:['mysrc', 'mytitle']
}

2）子传父

• 子组件<template>绑定事件
• 子组件methods部分触发自定义事件
• 父组件<template>在子组件上监听自定义事件
• 父组件methods部分处理子组件传来的参数

子组件

父组件

3）全局共享数据

*1. 通过 Vue的原型共享数据

main.js中定义

Vue.prototype.theme ="the 9"

.vue组件中使用

  onLoad() {
   
    console.log(this.theme)
  }

*2. 通过 globalData 共享数据

App.vue文件定义

globalData: {
   
	date: '2020-05-30'
}

获取

getApp().globalData.date

3. 组件插槽slo - 父向子传递标签

在父组件中使用到了子组件，在该页面的子组件内部插入标签，但是不知道具体的放置位置在哪，所以要在子组件定义的页面里用slot标签来占位。
父组件

• 这个标签放在子组件内部！
  
  子组件
• 使用<slot>占位，制定父组件传来的标签出现在哪个位置
  
  效果，救命啊~~~
  

5. 生命周期

• uni-app框架的生命周期结合了 vue 和 微信小程序的生命周期

• 全局的APP中 使用 onLaunch 表示应用启动时

• 页面中 使用 onLoad 或者 onShow 分别表示 页面加载完毕时 和页面 显示时

• 组件中使用 mounted 组件挂载完毕时

三、项目

（一）项目开始

0. 接口文档

接口文档

1. 起步

项目名称：my-project → 默认模板 → 注意项目目录（C:\try\uniapp\my-project\dist\dev\mp-weixin）→ AppId可暂时忽略

全局安装
npm install -g @vue/cli
创建项目
vue create -p dcloudio/uni-preset-vue my-project
启动项目（微信小程序）
npm run dev:mp-weixin
微信小程序开发者工具导入项目

2. 引入saas （在启动项目前安装）

安装依赖
npm install sass-loader node-sass
vue组件中,添加属性 <style lang='scss'>

注意： 这里需要在vscode里编辑C:\try\uniapp\my-project路径下的项目

3. 页面

app.js 文件 （微信小程序中）

  "pages": [
    "pages/index2/index",
    "pages/index/index"
  ],

pages数组中第一项表示应用启动页

---

pages.json（vscode中）

	"pages": [ 
		{
   
			"path": "pages/index/index",
			"style": {
   
				"navigationBarTitleText": "uni-app"
			}
		},
		{
   
			"path": "pages/index2/index",
			"style": {
   
				"navigationBarTitleText": "uni-app"
			}
		}
	]

4. 报错 sitemap配置

官网配置

VM303:1 sitemap.json
Error: 未找到入口 sitemap.json 文件，或者文件读取失败，请检查后重新编译。

在vscode的微信小程序的根目录下新建sitemap.json

{
   
  "rules":[{
   
    "action": "allow",
    "page": "*"
  }]
}

5. uni-api

uni-api

• 原生的微信小程序的api都是不支持promise

• uni-app对大部分的小程序的原生api做了封装，使之支持promise

使用方式 ：
wx.request（原生微信小程序）修改为uni.request （uni-api的方式 ）

微信小程序：

wx.request({
   
  url: '',
  success(res) {
   
    console.log(res)
  }
})

uni-api：

uni.request({
   
  url: ''
})
.then(res=> {
   
  console.log(res)
})

6. uni-ui

uni-ui

uni-ui的使用方式

• 安装uni-ui
• 局部引入组件
• 注册组件
• 使用组件

cnpm install @dcloudio/uni-ui

import {
   uniBadge} from '@dcloudio/uni-ui'
export default {
   
    components: {
   uniBadge}
}

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

7. 全局引入字体图标、样式

styles文件夹放入src路径下

在App.vue文件中引入，注意不能使用@

<style>
	@import "./styles/iconfont.wxss";
</style>

使用

<text class="iconfont iconvideocamera"></text>

8. 小程序导航栏标题、样式修改

pages.json

	"globalStyle": {
   
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "青春有你",