mpvue main.js引入css,mpvue 目录详解及mpvue踩坑系列

2023-11-21 02:10

本文主要是介绍mpvue main.js引入css,mpvue 目录详解及mpvue踩坑系列,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文件目录

app.json

.postcssrc.js 和 postcss.config.js

样式转化问题:rem转rpx

4fb888bb6a9aba406b2167e0d4d5c2ff.png

pages

其中每一个页面对应一个文件夹

main.js

6d1e4b6fa342b94eeaa29ab942b0f7d2.png

main.json

ec76bb0d7ef2e8d6b7a4ba8abecbfe87.png

index.vue

1、不要出现header,section,footer等标签,全部改成div

2、{{}}动态数据绑定

由于微信小程序的能力限制(数据绑定),所以无法支持复杂的 JavaScript 表达式。

凡是涉及较为复杂的表达式,可以用computed来代替

3、for 循环

e3dad5ae979d9a80b386aacbb252ae47.png

4、数据处理

da51db63f2eddf2bb7e06b011a11b0d7.png

b062e42552f68d37fbd89a74a21d10ed.png

5、生命周期

mpvue同时支持了vue的生命周期和小程序的生命周期

index.css

标签问题

1、注意b标签在小程序转化后是display:block 属性,所以要么将b标签改成span标签,要么在b标签里面添加display:inline-block属性

背景图片问题

2、背景图片只能用线上的图片,引用本地图片会报错。

图片自适应问题

3、图片宽高自适应问题,在小程序中直接设置图片宽度为100%是不能让他本身的高度是自适应的,需要在图片本身身上添加mode="widthFix"属性

2a9afbc482adcc8b71265bd1d8e6e3c6.png

iphoneX 兼容问题

4、iphoneX底部按钮兼容问题

onShow () {

let that = this

wx.getSystemInfo({

success: res => {

let modelmes = res.model

if (modelmes.search('iPhone X') !== -1) {

that.isIphoneX = true

that.$store.commit('setIsIphoneX', that.isIphoneX)

}

}

})

}

复制代码navBar 样式

5、底部弹出框遮盖navBar 问题

navBar 层级最高,所以只能自定义navbar,或者将弹出框出现在中间部分。

自定义弹出框问题

6 自定义弹出框——后面背景不能动问题

7fecde21c0fca3767b970b6c73ac9d2a.png

components

和vue使用组件方法原理一样

style 文件夹

vue文件

utils

import Vue from 'vue'

var Fly = require('flyio/dist/npm/wx') // wx.js为flyio的微信小程序入口文件

var fly = new Fly() // 创建fly实例

// 添加拦截器

// 添加响应拦截器,响应拦截器会在then/catch处理之前执行

fly.interceptors.response.use(

(response, promise) => {

// 只将请求结果的data字段返回

return response.data

},

(err, promise) => {

if (err) {

wx.hideLoading()

wx.showToast({

title: '网络不流畅,请稍后再试',

icon: 'none',

duration: 2500

})

}

}

)

// 配置请求基地址

Vue.prototype.$http = fly

fly.config.baseURL = 'http://user.cheeze.api.dev.hzmantu.com/api'

export default fly

复制代码request.js

请求数据

import store from '@/utils/store.js'

import Vue from 'vue'

Vue.prototype.$store = store

const host = ''

function request (url, method, data, header) {

wx.showLoading({

title: '加载中' // 数据请求前loading

})

return new Promise((resolve, reject) => {

wx.request({

url: host + url, // 仅为示例,并非真实的接口地址

method: method,

data: data,

header: header,

success: function (res) {

wx.hideLoading()

resolve(res.data)

},

fail: function (error) {

wx.hideLoading()

reject(error)

},

complete: function () {

wx.hideLoading()

}

})

})

}

function get (obj) {

return request(obj.url, 'GET', obj.data, obj.header)

}

function post (obj) {

return request(obj.url, 'POST', obj.data, obj.header)

}

function del (obj) {

return request(obj.url, 'DELETE', obj.data, obj.header)

}

export default {

request,

get,

post,

del,

host

}

复制代码

小程序对应规则

页面跳转

路由跳转传参

wx.navigateTo({

url:'../test/main?id='+id

})

复制代码第一种:

onShow (options) {

let id = options.id

}

复制代码第二种:在所有页面组件内可以通过 this.mp.query获取

要注意就是:写在mounted函数里,写到created报错

第三种:在所有的组件内可以通过 this.mp.appOptions获取。

正常情况下三种应该都是可以的,某一种没用的时候就尝试另外两种

e93d736a6892de802166ff75f03e8957.png

微信自带组件

弹出框

14a65eaa6e74d1dbb51092f06dc0dc08.png

picker 组件踩坑

当前选择: {{date}}

复制代码

mpvue 可以支持小程序的原生组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

睁大眼睛仔细对比小程序文档和我截图代码的区别

mpvue 中同样有事件,但是调取参数 e 的值的方式和 Web 不同,需要使用 e.mp.detail

4b93f0abe437e42e1931a66683ae8799.png

2c4bde94a00da0ea985b06e289643c25.png

轮播图

8ef18e0f8a74b74f10563214c4e339df.png

设置图片高度:要去设置swiper标签的高度才能控制图片的高度

这篇关于mpvue main.js引入css,mpvue 目录详解及mpvue踩坑系列的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/399094

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl