WeChat 애플릿 개발을 위한 호스트 환경에 대한 자세한 설명

이 기사에서는 호스트 환경과 관련된 문제를 주로 소개하는 WeChat 미니 프로그램에 대한 관련 지식을 제공합니다. 휴대폰의 WeChat은 미니 프로그램의 호스트 환경에서 호스트 환경이 제공하는 기능을 사용할 수 있습니다. 일반 웹 페이지에서는 완료할 수 없는 많은 기능을 아래에서 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

【관련 학습 권장 사항: 미니 프로그램 학습 튜토리얼】

미니 프로그램을 위한 호스트 환경

모바일 WeChat은 미니 프로그램을 위한 호스트 환경으로, 미니 프로그램은 호스트 환경에서 제공하는 기능을 사용하여 많은 것을 달성할 수 있습니다. 일반 웹페이지에서는 할 수 없는 기능을 완성했습니다. 예를 들어 미니 프로그램은 WeChat에서 제공하는 API를 호출하여 QR 코드 스캔 및 결제와 같은 기능을 구현합니다.

애플릿의 호스팅 환경에는 다음이 포함됩니다.

통신 모델

실행 메커니즘

Components

API

통신 모델

1. 에서는 mini 프로그램 통신의 주체는 렌더링 레이어와 로직 레이어입니다. 그 중

WXML 템플릿과 WXSS 스타일은 렌더링 레이어에서 작동합니다.

JS 스크립트는 로직 레이어에서 작동합니다

2. program미니 프로그램의 통신 모델은 두 부분으로 나뉩니다.

렌더링 레이어와 로직 레이어 간 통신

로직 레이어와 타사 서버 간 통신

둘 다 전달됩니다. WeChat 클라이언트를 통해

실행 메커니즘

1. 미니 프로그램의 시작 프로세스미니 프로그램의 코드 패키지를 로컬에 다운로드

app.json 전역 구성 파일을 구문 분석

실행 app.js 미니 프로그램 항목 파일에서 App()을 호출하여 미니 프로그램을 만듭니다. 파싱된 페이지의 json 구성 파일

페이지의 .wxml 템플릿과 .wxss 스타일을 로드합니다.

페이지의 .js 파일을 실행하고 Page()를 호출하여 페이지 인스턴스를 생성합니다.

페이지 렌더링이 완료되었습니다

Components

1. 미니 프로그램의 구성 요소 분류:

미니 프로그램의 구성 요소도 다음과 같이 구성됩니다. 호스팅 환경을 제공하면 개발자는 구성 요소를 기반으로 아름다운 페이지 구조를 빠르게 구축할 수 있습니다. 미니 프로그램의 구성 요소는 공식적으로 9가지 범주로 나뉩니다. 즉,

View 컨테이너

기본 콘텐츠

Form 구성 요소

Navigation 구성 요소

• Body 구성 요소

• 지도 맵 컴포넌트

• 캔버스 캔버스 컴포넌트

• 오픈 기능

• 접근성

• 2. 일반적으로 사용되는 뷰 컨테이너 클래스 컴포넌트

• view
• 일반 뷰 영역
  The div와 유사함 HTML에서는 블록 수준 요소로 페이지 레이아웃 효과를 얻기 위해 자주 사용됩니다. 예를 들어 가로 레이아웃을 얻으려면 flex를 사용하세요.

• wxml 코드:

  <view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
  </view>

wxss 코드:

.container1 view{
  width:100px;
  height:100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: aquamarine;
}
.container1 view:nth-child(2){
  background-color: azure;
}
.container1 view:nth-child(3){
  background-color: darkorange;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

성취 효과:

scroll-view

스크롤 가능한 보기 영역

효과

스크롤 사용 -view는 위아래로 스크롤하는 효과를 얻습니다

wxml 코드:

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

수정된 wxss 코드:

.container1 {
  border:1px solid red;
  height:110px;
  /*使用scroll-view时设置固定的高度*/

구현 효과:

swiper 및 swiper-item

• 회전식 차트 컨테이너 구성 요소 및 회전식 차트 항목 구성 요소

회전판 효과를 얻으려면 다음 두 구성요소를 사용하세요.

• wxml 코드:

  <swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>
  <swiper-item>
  <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
  </swiper>

wxss 코드:

.swiper-container{
  height:150px;
}
.item{
  height:100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: aquamarine;
}
swiper-item:nth-child(2) .item{
  background-color: azure;
}
swiper-item:nth-child(3) .item{
  background-color: darkorange;
}

성취 효과:

3. 일반적으로 사용되는 기본 콘텐츠 구성 요소

text.

텍스트 구성 요소

HTML의 스팬 태그와 유사하며 인라인 요소입니다.

길게 눌러 텍스트 내용을 선택하는 효과를 실현합니다.

<view>
长按可以选中文本内容:
<text user-select>HelloWorld!</text>
</view>

rich-text

리치 텍스트 구성 요소는 HTML 문자열을 WXML 구조로 렌더링하는 것을 지원합니다.

HTML 문자열을 해당 UI 구조로 렌더링합니다

<rich-text nodes="<h1 style=&#39;color:red&#39;>标题</h1>"> </rich-text>

4.其他常用组件

button

按钮组件

功能比 HTML 中的 button 按钮丰富

通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

image

图片组件

image 组件默认宽度约 300px、高度约 240px

navigator

页面导航组件

类似于 HTML 中的 a 链接，实现页面的跳转

5.API

小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：实现支付，扫码等功能。

小程序 API 的 3 大分类：

事件监听 API

• 特点：以 on 开头，用来监听某些事件的触发

• 举例：wx.onWindowResize(function callback) 监听窗口尺寸变化的事件

同步 API

• 特点1：以 Sync 结尾的 API 都是同步 API

• 特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

• 举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容

异步 API

• 特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果

• 举例：wx.request() 发起网络数据请求，通过 success 回调函数接收数据

【相关学习推荐：小程序学习教程】

위 내용은 WeChat 애플릿 개발을 위한 호스트 환경에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!