집 >위챗 애플릿 >미니 프로그램 개발 >mpvue를 사용한 WeChat 애플릿 개발에 대한 기본 지식
mpvue는 Vue.js를 사용하여 작은 프로그램을 개발하는 프런트 엔드 프레임워크입니다. 프레임워크는 Vue.js 코어를 기반으로 합니다. mpvue는 미니 프로그램 환경에서 실행될 수 있도록 Vue.js의 런타임 및 컴파일러 구현을 수정하여 미니 프로그램 개발을 위한 완전한 Vue.js 개발 경험을 도입합니다. mp는 미니 프로그램의 약자입니다.
① 스캐폴딩을 통해 mpvue 템플릿 도입
vue 3.0은 더 이상 vue init 명령을 지원하지 않으므로 별도로@vue/cli-init을 설치해야 합니다. 다음 단계에 따라 mpvue 템플릿을 도입하세요npm run dev 명령은 프로젝트 루트 디렉터리에 dist 디렉터리를 생성합니다. 이는npm install -g @vue/cli-init vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run dev
vue 프로젝트를 WeChat 애플릿 프로젝트로 변환② 개발 환경을 구축하는 것입니다. for the applet
WeChat은 작은 프로그램 개발을 위한 전용
WeChat 개발자 도구를 제공합니다. WeChat 개발자 도구를 다운로드하여 설치해야 하며, create이기 때문에 작은 프로그램 ID, 즉 AppID도 신청해야 합니다. WeChat 개발자 도구를 통한 소규모 프로그램 프로젝트는 WeChat 공개 플랫폼에서 신청할 수 있는 AppID를 입력해야 합니다.3 프로젝트 디버깅WeChat 개발자 도구를 통해 WeChat 애플릿 프로젝트를 시작하세요.
WeChat 개발자 도구는 .vue를 지원하지 않기 때문에 선택한 프로젝트 디렉터리는 생성된 dist 디렉터리가 아닌 mpvue 프로젝트의 루트 디렉터리입니다. 파일을 보기 하므로 소스 코드를 디버깅하려면 여전히 자체 개발 도구를 사용해야 합니다.
App.vue 루트 구성 요소도 있습니다, App.vue 루트 구성 요소는 단지 구조입니다, 특정 콘텐츠가 없습니다 루트 구성 요소에는 App.vue 루트 구성 요소를 렌더링하기 위한 해당 main.js 파일이 있습니다. 즉, App.vue를 도입하고 Vue 인스턴스를 Vue 생성자로 생성한 다음 마운트합니다. app.json 파일도 있습니다. 즉, 페이지 등록, tabBar 등록 및 전역 창 스타일 설정에 사용되는 페이지 전역 구성 파일입니다. 예:
/ / App.vue3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { } 2cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 page { width: 100%; height: 100%; background-color: #f7f7f7; } 531ac245ce3e4fe3d50054a55f265927// main.js
import Vue from 'vue' import App from './App' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue(App) app.$mount()// app.json
{ "pages": [ "pages/index/main" ], "tabBar": { ...... }, "window": { "backgroundColor":"#00BFFF", "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "测试", "navigationBarTextStyle": "black" } }② mpvue에 정의된 페이지들은 src 디렉토리 아래의
pages 디렉토리에 위치합니다. 한 페이지는 하나의 폴더에 해당합니다. 그리고 각 페이지 폴더에는 .vue 파일과 main.js 파일이 있어야 합니다. main.js가 하는 주요 일은 현재 페이지에 해당하는 .vue를 도입한 다음 Vue 인스턴스를 Vue 생성자와 mount의 매개변수이며 main.js의 이름은 변경할 수 없습니다 , 는 main.
// main.jsimport Vue from 'vue' import App from './index' // add this to handle exception Vue.config.errorHandler = function (err) { if (console && console.error) { console.error(err) } } const app = new Vue(App) app.$mount()만 가능합니다. mpvue에서는 .vue의 이름이 페이지의 파일은 임의적일 수 있으며
.js 및 .json 파일의 이름은 main 으로 고정됩니다. 일반적으로 .vue 파일도 index.vue를 사용합니다. 모든 a 페이지에는 일반적으로 index.vue, main.js, main이 포함됩니다. .json, 다른 페이지는 외부 폴더를 통해 구분됩니다. 기본 미니 프로그램에서는 외부 폴더도 다른 페이지를 구분하는 데 사용되지만 폴더에 있는 4개 페이지의 이름은 외부 폴더와 같을 수도 있고 다를 수도 있습니다. 하지만 4개의 파일은 통합되어야 합니다. 3새 페이지가 추가될 때마다 프로젝트를 다시 시작해야 합니다
즉, npm run dev를 다시 실행해야 합니다.4 WeChat Mini 프로그램 및 공통 API의 기본
WeChat 애플릿은 open-type
을 추가하여bb9345e55eb71822850ff156dfde57c8 버튼에 WeChat 개발 기능을 제공합니다. getUserInfo, 즉 버튼을 클릭하여 사용자 정보를 얻는 기능과 같은 기능 유형 에 대한 버튼을 열려면 getuserinfo 이벤트를 수신해야 합니다. mpvue는 미니 프로그램을 기반으로 이를 캡슐화합니다. 사용자 정보는 e.mp.detail.userInfo,를 통해 얻을 수 있습니다. 브라우저 환경에서는 전역 창 개체를 제공하며 동일한 애플릿이 미니 프로그램 환경에서 실행됩니다.1b84c2ef82cb742a2cccf70ca3d50af4点击开始65281c5ac262bf6d81768915a4a77ac0 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { getUserInfo(e) { console.log(e.mp.detail.userInfo); // 获取用户信息 } } 2cacc6d41bbb37262a98f745aa00fbf0② wx 전역 객체
미니 프로그램 환경에서는 전역 wx 개체도 제공합니다. (wx.request({}) ③ 微信小程序中发起网络请求 ④ 跳转页面非tabBar页面 ⑤ 跳转到tabBar页面 ⑥ 页面配置文件 ⑦ 小程序页面与Vue生命周期 ⑧ 导航到某个页面 ⑨ 动态设置页面导航栏标题 ⑩ 本地缓存数据 同样,微信小程序也提供了getStorage({})方法,用于获取对应key中存储的数据,其还有success、fail、complete三个回调函数,如: ⑪ 轮播图组件 ⑫ 可滚动区域组件 推荐教程:《微信小程序》
) 및 페이지 이동(wx.redirectTo({})), 디스플레이 로딩(wx.showLoading({})), 디스플레이 프롬프트(wx.showToast({}) )) 등
在小程序环境中不能像浏览器环境一个直接提供ajax,而是提供了一个全局的网络请求api,即wx.request(),在小程序环境中只能使用wx.request()发起网络请求,不能使用axios等常用的请求类库,并且wx.request()并不存在跨域问题。使用wx.request()的时候,需要传递一个请求参数配置对象,request()方法返回结果并不是一个Promise对象,所以不能通过.then()的方式去处理请求结果,而是在请求配置对象中添加了success、fail、complete等回调函数,在回调函数中可以获取到请求的结果,如:wx.request({
url: "http://www.baidu.com", // 请求url地址必填
data: {
user: "even li"
},
method: "get", // 请求方法
header: {
"content-type": "application/json" // 默认值
},
success(res) {
console.log(res.data); // 获取响应数据
},
fail(error) {
console.log(error); // 请求失败
}
complete(res) { // 接口调用结束,请求成功或失败都会执行
console.log(res); // 如果请求成功则res为响应结果res,如果请求失败则res为错误信息error
}
});
需要注意的是,返回状态码为404也算请求成功,一般只有网络异常的时候才算请求失败。
如果想要跳转到某个非tabBar页面,那么可以使用一个全局的api,即wx.redirectTo({}),其作用就是关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。需要传递一个配置对象,主要属性为url,即要跳转页面的路径,可带参数,然后就是success、fail、complete三个回调函数,请处理跳转结果,如:wx.redirectTo({
url: "../question/main", // 在某个页面内../相当于pages/
success() {
},
fail() {
},
complete() {
}
});
在微信小程序中,tabBar页面是需要特殊的方式跳转的,即使用wx.switchTab({})的方式,其会跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,其用法同wx.redirectTo({});wx.switchTab({
url: "../learn/main", // 在某个页面内../相当于pages/
success() {
},
fail() {
},
complete() {
}
});
小程序的页面配置文件分为全局配置文件app.json与即页面配置main.json. 全局配置文件可配置项比较多,整个配置文件内容要用花括号括起来,也就是说是一个JSON对象,如:
微信小程序设置颜色的时候,只支持十六进制颜色,不支持RGB格式和颜色英文。
页面配置配置相对于全局主配置文件来说要简单得多,在页面配置文件中只能配置窗口的样式属性,即只能配置全局配置文件中的window属性中的内容,页面配置文件中配置的内容会覆盖掉全局配置文件中window中相同的配置,以决定当前页面的窗口表现,无需使用window属性,直接将window配置放到花括号中即可。
小程序给页面提供了onLoad(页面加载)、onShow(页面显示,但还未渲染完成)、onReady(页面渲染完成)、onHide(页面隐藏)、onUnload(页面卸载),mpvue将小程序提供的页面生命周期和vue的生命周期结合在了一起,也就是说使用mpvue开发小程序,可以同时使用小程序的生命周期和vue的生命周期,其顺序为: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即Vue首先实例化然后页面开始加载、显示、渲染,页面渲染完成后Vue实例开始挂载。
所谓导航到某个页面,就是跳转到某个页面,但是其会保留当前页面,跳转的目的页面导航栏左侧中自带一个返回按钮,点击可以回到之前的页面,但是这个跳转的目的页面不能是tabbar中的页面,其使用的是wx.navigateTo({})wx.navigateTo({
url: "../myLesson/main" // 导航到我的课程页面,目标页面自带返回按钮,点击可返回之前的页面
});
当我们点击列表中的某个具体项时,通常需要在其对应页面动态显示出当前点击项的具体导航栏标题,微信小程序提供了wx.setNavigationBarTitle({})用于动态设置导航栏栏标题,同样有success、fail、complete三个回调函数,如:wx.setNavigationBarTitle({
title: "动态标题内容",
success() {
},
fail() {
},
complete() {
}
});
微信小程序提供了setStorage({})方法,可以将数据存储在本地缓存中指定的 key 中,除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。如:wx.setStorage({
key:"key",
data:"value"
});
wx.getStorage({
key: "key",
success (res) { // 成功获取到对应key中的数据
},
fail() { // 未成功获取到对应key中的数据
},
complete() { // 获取对应key数据结束,不管成功还是失败都会执行
}
});
getStorage()和setStorage()方法本身是异步的,但是微信小程序提供了对应的同步方法,即getStorageSync("key")和setStorageSync("key", "value");
微信小程序提供了一个806a43c0997cff837bc4d4708cd6ae53轮播图组件,其中只可放置swiper-item组件,swiper有一些常用的属性,如:
382b563c9fc8b25f4069f27991de6a93
3e350b609204f318855334b7470a220e
718137ecd0896f921b876dfd20260138
1f614e0bc8782717a386429e7848db05
6b9c44cec84deee6d613a7bf98241fff
36b196a5d42bcd29e331cb722979f9a6
00d60d359d79ef3ad471162a03ef38f0
当然,806a43c0997cff837bc4d4708cd6ae53组件不仅仅能实现图片的轮播,还可以实现其他轮播,比如列表内容的轮播(导航和内容的联动),我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性,而是通过手进行滑动,swiper组件还有一个current属性,属性值为滑动块的索引值,用于显示对应的滑动item,从而实现导航和内容的联动,即点击导航,自动切换到对应内容。swiper组件也提供了change事件,当我们手动滑动滑动item的时候,就会触发change事件,可以在事件对象中拿到对应滑块的索引,从而更新导航位置,实现滑动内容,自动高亮导航位置。
微信提供了一个050e2adc6de973d5d8d682f9c1b9f656可滚动区域组件,用于设置该区域中的内容是可以滚动的,通常用于实现可滚动的导航标签栏,其常用属性为:
要实现点击某个滚动item后,自动滚动到对应滚动item位置,那么需要给每个滚动item添加一个id,然后动态改变scroll-into-view的值为对应的滚动item的id即可。
<scroll-view class="btns_wrap"
scroll-x :scroll-into-view="toChildView"
scroll-with-animation>
<span :class="{active: currentIndex === index}"
class="btn_scroll"
v-for="(item, index) in allLessons"
:key="index"
:id="item.id"
@click="switchItem(index)">
{{item.name}}
</span>
</scroll-view>
위 내용은 mpvue를 사용한 WeChat 애플릿 개발에 대한 기본 지식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!