Penjelasan terperinci tentang persekitaran hos untuk pembangunan applet WeChat

Artikel ini membawakan anda pengetahuan yang berkaitan tentang Program Mini WeChat, yang terutamanya memperkenalkan isu yang berkaitan dengan persekitaran hos pada telefon mudah alih ialah persekitaran hos untuk program mini, dan program mini bergantung pada persekitaran hos Keupayaan yang disediakan boleh merealisasikan banyak fungsi yang tidak dapat dilengkapkan oleh halaman web biasa. Saya harap ia dapat membantu semua orang.

[Cadangan pembelajaran berkaitan: Tutorial pembelajaran program mini]

Persekitaran hos program mini

WeChat Mudah Alih Ia adalah persekitaran hos untuk program mini Dengan bantuan keupayaan yang disediakan oleh persekitaran hos, program mini boleh merealisasikan banyak fungsi yang tidak dapat diselesaikan oleh halaman web biasa. Contohnya: program mini memanggil API yang disediakan oleh WeChat untuk melaksanakan fungsi seperti pengimbasan dan pembayaran kod QR.

Persekitaran hos applet mengandungi:

Model komunikasi

Mekanisme berjalan

Komponen

API

Model komunikasi

1 applet Badan utama komunikasi ialah lapisan pemaparan dan lapisan logik, di mana: Templat WXML dan gaya WXSS berfungsi dalam lapisan pemaparan

Skrip JS berfungsi dalam lapisan logik

2. Model komunikasi program mini

Model komunikasi program mini terbahagi kepada dua bahagian:

Lapisan pemaparan dan lapisan logik Komunikasi antara

Komunikasi antara lapisan logik dan pelayan pihak ketiga

Kedua-duanya dimajukan melalui klien WeChat

Mekanisme operasi

1 Proses permulaan program mini

Muat turun pakej kod program mini ke. tempat setempatMenghuraikan app.json secara global Fail konfigurasi

Laksanakan fail entri applet app.js, panggil App() untuk mencipta tika applet

Render halaman utama applet

Permulaan applet telah selesai

2. Proses pemaparan halaman

Muat fail konfigurasi .json bagi halaman yang dihuraikanMuat templat halaman .wxml dan gaya .wxss

Laksanakan fail .js halaman, panggil Page() untuk mencipta contoh halaman

Perenderan halaman selesai

Komponen

1 🎜>

Komponen dalam program mini juga disediakan oleh persekitaran hos, dan pembangun boleh menggunakannya berdasarkan komponen Bina struktur halaman yang cantik dengan pantas. Secara rasminya, komponen program mini terbahagi kepada 9 kategori iaitu:

Lihat bekas

Kandungan asas

• Komponen bentuk

• Komponen navigasi

• Komponen badan

• peta peta komponen

• komponen kanvas kanvas

• Keupayaan terbuka

• Kebolehaksesan
• 2 Komponen bekas paparan yang biasa digunakan

pandangan

Kawasan pandangan biasa adalah serupa dengan The div dalam HTML ialah elemen peringkat blok

yang biasa digunakan untuk mencapai kesan reka letak halaman

Contohnya: gunakan flex untuk mencapai reka letak mendatar.

kod wxml:

kod wxss:

Kesan pencapaian:

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

tatal-paparan

.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;
}

Kawasan boleh tatal pandangan

Biasa digunakan untuk mencapai kesan senarai tatal

• Gunakan paparan tatal untuk mencapai kesan menatal ke atas dan ke bawah
• kod wxml:

Kod wxss yang diubah suai:

Kesan yang dicapai:

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

leret dan item leret

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

Komponen kontena karusel dan komponen item karusel

Gunakan kedua-dua komponen ini untuk mencapai kesan karusel:

kod wxml:

kod wxss:

Kesan pencapaian:

<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>

.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. Komponen kandungan asas yang biasa digunakan

teks

Komponen teks adalah serupa dengan teg span dalam HTML dan merupakan elemen sebaris

Realisasikan kesan menekan lama untuk memilih kandungan teks

kaya teks

Komponen teks kaya menyokong pemaparan rentetan HTML Untuk WXML struktur

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

menjadikan rentetan HTML ke dalam struktur UI yang sepadan

<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 回调函数接收数据

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

Atas ialah kandungan terperinci Penjelasan terperinci tentang persekitaran hos untuk pembangunan applet WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!