weapp mark

Tanda

Ini murni proyek hiburan dan pembelajaran. Saya sesekali mencatat masalah dan ide yang ditemui selama pengembangan dan memperbaruinya dari waktu ke waktu. Proyek ini memiliki komponen yang dienkapsulasi sendiri, yang dapat dilihat dalam struktur proyek.

Semua data film dan televisi disediakan oleh Douban API. Saat ini, tidak ada antarmuka pencarian Douban gratis yang tersedia. Antarmuka yang saya sediakan diterapkan di Vercel dan tidak dapat ditambahkan ke backend WeChat tanpa registrasi. Fungsi pengembangan pribadi dari mini program ini terlalu terbatas dan tidak dapat diluncurkan sepenuhnya. Jika mau, Anda dapat mengkloning proyek tersebut dan menjalankannya sendiri.

? Pengalaman pemindaian

? Cabang

1. main - Menggunakan pengembangan cloud program mini WeChat, program mini lengkap dapat dikembangkan tanpa latar belakang.
2. master - layanan latar belakang didukung oleh layanan cloud LeanCloud.
3. cdn-ui - tidak ada dukungan layanan latar belakang, semua file JSON statis dari blog pribadi menggunakan permintaan HTTP.

Peta pikiran online

Hal yang perlu diperhatikan:

Untuk menggunakan Komponen komponen khusus, pustaka versi dasar program mini harus di atas 1.6.3;

Untuk menggunakan wxParse, pustaka versi dasar program mini harus 1.6.6 atau lebih tinggi.

Pengikatan program mini dua arah yang sederhana, program mini perpustakaan versi dasar 2.9.3 dan yang lebih baru

? Fitur

• Fungsi cloud mengimplementasikan login WeChat
• Tugas terjadwal fungsi cloud mewujudkan kartu harian
• Kueri agregasi fungsi cloud mewujudkan pengumpulan kartu
• Tata letak tabel multi-kolom kisi
• Tata letak grid mengimplementasikan aliran air terjun
• Fungsi cloud merayapi GitHub Trending
• Tentang pemutaran audio latar belakang halaman
• Gunakan templat dan Komponen masing-masing untuk mengimplementasikan komponen publik
• Animasi properti CSS3

? Kode etik

Setelah sekian lama, saya lupa spesifikasi apa yang saya tetapkan untuk diri saya sendiri sebelumnya menyebabkan kode menjadi sangat tidak konsisten. Bisakah saya membuat cadangan spesifikasi proyek untuk diri saya sendiri?

CODE_OF_CONDUCT.md

? Berlari

Kloning proyek ini dan gunakan Alat Pengembangan Web WeChat untuk membuka direktori root proyek

Instal dependensi

yarn # or npm install

Alat bilah menu -> Bangun npm

Lingkungan pengembangan cloud

Setelah membuka lingkungan pengembangan cloud, sinkronkan proyek /cloudfunctions/ ke cloud (lihat Inisialisasi Lingkungan Pengembangan Cloud) dan modifikasi app.js

 wx . cloud . init ( {
  traceUser : true ,
  env : 'dev-oucwt' // 此处替换为你自己的云环境 ID
} ) ;

Catatan: debugging perlu diaktifkan ketika melihat pratinjau lingkungan pengembangan pada mesin nyata

API tiruan

Lihat dokumentasi resmi API Mock/Rules untuk impor dan ekspor, dan impor mock/mock.config.json. Kemampuan Mock yang disediakan oleh alat pengembangan saat ini tidak mendukung pratinjau seluler.

Catatan: Jika Anda tidak memiliki AppID, Anda mungkin tidak dapat melihat data dan tidak dapat mempratinjaunya di ponsel Anda. Alat pengembangan perlu mematikan verifikasi nama domain aman. Toolbar --> Detail --> Setelan Proyek --> Centang Jangan verifikasi nama domain aman... dan sertifikat HTTPS .

?CatatanCatatan

Vercel menjadi tuan rumah Selanjutnya untuk mengimplementasikan GitHub Trending API

Program mini menggunakan IconFont

Kasus tabel asosiasi pengembangan cloud (koleksi).

Pemikiran saat menulis proyek

Catatan saat menulis

Program mini menggunakan font eksternal

Implementasi template komponen penilaian khusus program mini (akurasi 0,1)

Komponen penilaian khusus program mini - Implementasi komponen (akurasi 0,1)

? StrukturStruktur

 ├── apis
├── assets
├── components  组件化 Component
│    ├── cover-page 可下拉关闭的半屏组件
│    ├── pre-image 图片预加载
│    ├── rating 评分
│    └── tabs
├── cloudfunctions
├── pages
│    └── common  模板 template
│        ├── actionsheet 操作菜单
│        ├── cell 列表单元
│        ├── dropmenu 下拉菜单
│        ├── loading 加载/加载更多
│        ├── rating  评分
│        ├── share 底部分享菜单
│        ├── wxParse  富文本、HTML 和 MD 解析，小程序基础版本库 1.6.6 及以上
│        └── component.js  wux 针对 template 的组件化，写得挺好，借鉴一下
├── style
│    ├── weui.wxss
│    ├── animate.wxss CSS 动画
│    └── font-awesome.min.wxss Font Awesome 字体图标
├── utils
│    └── wxCloud.js 云函数二次封装
├── app.js
├── app.json
└── app.wxss

Poin rasa sakit

• Program mini tidak mendukung komponen global dan mengharuskan komponen diperkenalkan di setiap halaman. Seperti menyesuaikan kotak prompt global

? Referensi

1. Gaya UI resmi WeChat weui-wxss
2. Teks kaya, HTML dan penguraian penurunan harga wxParse
3. Wux komponen khusus untuk templat
4. Layanan cloud LeanCloud menyediakan dukungan latar belakang
5. Lingkungan pengembangan layanan cloud (resmi)
6. Solusi program mini (resmi)