WeChat Mini Program is something between a native app and H5. If you have used cordova, Hbuiler, appCan and the like to develop hybrid apps, then the WeChat applet may be closer to this method. However, WeChat mini programs rely on the WeChat development platform, and even the IDE is dedicated. The finished product can only be found in WeChat by searching or scanning the QR code to find the entrance, and then access it. These days I have been trying to use WeChat applet to rewrite the original H5 project. I have some small experiences, and I am afraid that I will forget them after a long time, so I wrote them down and used them as a memo, and also shared them with classmates who want to learn WeChat mini programs.
The WeChat applet is made in China, so you don’t have to worry about the documents being incomprehensible or the network being blocked, which is very convenient. The official getting started tutorial is written very simply and is directly linked to. If you have not come into contact with WeChat mini programs before, you can follow my steps. The first thing is to download the development tools and sharpen the knife without missing the wood. Click here to download This is an IDE tool for WeChat applet development. It integrates preview, packaging and publishing,
directory structure, the middle is the preview effect, and the right is the console.
Framework. Here are some knowledge points that need to be understood:
.js is the script code of the mini program, .wxss is the style, and .json is Configuration information. Every time a new page is added, a new configuration must be added to the page item in app.json. For example, add an "About Us":"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/about/about" //添加關(guān)于我們
], After saving, the necessary files and directories will be automatically generated. Next, make corresponding modifications according to your own business. Note that in WeChat mini programs, tools such as jQuery/zetpo can no longer be used. Because there is no window in the WeChat appletFor the pages you create, they all start with Page({}). If you have used Vue, imagine the calling method of new Vue({}). The syntax and ideas of WeChat applet are very similar to Vue, maybe it is possible to refer to its method. Page({
data: {
motto: 'Hello World',
userInfo: {}
},
onLoad: function () {
//初始化
}
})The page part of the WeChat applet ends with .wxml, just think of it as .html, but its syntax is similar to the xml structure, and the tags must be self-closing, such as view container component, <view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view> The usage of components is very simple, bindtap是固定寫法就相當(dāng)于onclick，bindViewTap就是事件要做的事情。相當(dāng)于onclick=bindViewTap，不過和直接在html中的on綁定又有點(diǎn)區(qū)別，這里用的bindtap是虛擬邦定，最終都是通過事件代理進(jìn)行實(shí)際派發(fā)，所以event對象也是一個(gè)二次封裝的對象。這一點(diǎn)和React中的事件邦定用法是同樣的套路。
在view上邦定好事件類型和方法名之后，要在頁面（比如index)中添加相應(yīng)的事件函數(shù)。比如：
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
}更多參考信息
變量循環(huán)：wx:for
頁面中使用 block 控制標(biāo)簽來組織代碼，在 block上使用 wx:for 綁定 循環(huán)數(shù)據(jù)，并將 循環(huán)體數(shù)據(jù)循環(huán)展開節(jié)點(diǎn)
<block wx:for="{{數(shù)組變量}}">
{{item}} //item數(shù)組成員
</block>頁面跳轉(zhuǎn)：wx.navigateTo
wx.navigateTo({
url: '../about/about'
})插件API:
依靠插件，微信小程序可以使用原生APP才有的功能，具體內(nèi)容查看官方插件列表。下面以調(diào)用攝像頭和相冊為例，介紹插件的用法：
wx.chooseImage
首頁在頁面中綁定一個(gè)點(diǎn)擊事件：
<!--pages/about/about.wxml-->
<view>
<text>pages/about/about.wxml</text>
<icon type="success" bindtap="bindEvent"></icon>
</view>然后在about.js中添加事件函數(shù)
// pages/about/about.js
Page({
data:{},
//....省略無關(guān)代碼
bindEvent:function(e){
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
}
})
}
})
預(yù)覽：
點(diǎn)擊IDE工具的左邊，“項(xiàng)目” ，如果有AppID ，可以上傳，通過手機(jī)在微信中進(jìn)行查看。
其它：
微信小程序中有許多與傳統(tǒng)開發(fā)方式不一樣的地方，需要多留意官方的F&Q ,避免趟一些不必要的坑。
The above is the detailed content of Recommended to people who are new to WeChat development. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
TikTok web version entrance login link address https TikTok web version entrance website free
May 22, 2025 pm 04:24 PM
The login portal for the Douyin web version is https://www.douyin.com/. The login steps include: 1. Open the browser; 2. Enter the URL https://www.douyin.com/; 3. Click the "Login" button and select the login method; 4. Enter the account password; 5. Complete login. The web version provides functions such as browsing, searching, interaction, uploading videos and personal homepage management, and has advantages such as large-screen experience, multi-tasking, convenient account management and data statistics.
Copy comics (official website entrance)_Copy comics (nba) genuine online reading portal
Jun 05, 2025 pm 04:12 PM
Copying comics is undoubtedly a treasure that cannot be missed. Here you can find basketball comics in various styles, from passionate and inspiring competitive stories to relaxed and humorous daily comedy. Whether you want to relive the classics or discover new works, copying comics can meet your needs. Through the authentic online reading portal provided by copy comics, you will bid farewell to the trouble of pirated resources, enjoy a high-definition and smooth reading experience, and can support your favorite comic authors and contribute to the development of authentic comics.
Which is better, uc browser or qq browser? In-depth comparison and evaluation of uc and qq browsers
May 22, 2025 pm 08:33 PM
Choosing UC browser or QQ browser depends on your needs: 1. UC browser is suitable for users who pursue fast loading and rich entertainment functions; 2. QQ browser is suitable for users who need stability and seamless connection with Tencent products.
Top 10 AI writing software rankings Recommended Which AI writing software is free
Jun 04, 2025 pm 03:27 PM
Combining the latest industry trends and multi-dimensional evaluation data in 2025, the following are the top ten comprehensive AI writing software recommendations, covering mainstream scenarios such as general creation, academic research, and commercial marketing, while taking into account Chinese optimization and localization services:
Watch the official page of NIS comics online for free comics. The free entry website of NIS comics login page
Jun 12, 2025 pm 08:18 PM
Nice Comics, an immersive reading experience platform dedicated to creating for comic lovers, brings together a large number of high-quality comic resources at home and abroad. It is not only a comic reading platform, but also a community that connects comic artists and readers and shares comic culture. Through simple and intuitive interface design and powerful search functions, NES Comics allows you to easily find your favorite works and enjoy a smooth and comfortable reading experience. Say goodbye to the long waiting and tedious operations, enter the world of Nice comics immediately and start your comic journey!
Frog Man Online Viewing Entrance Man Frog Man (Web Page Entrance) Watch Online
Jun 12, 2025 pm 08:06 PM
Frogman Comics has become the first choice for many comic lovers with its rich and diverse comic resources and convenient and smooth online reading experience. It is like a vibrant pond, with fresh and interesting stories constantly emerging, waiting for you to discover and explore. Frog Man comics cover a variety of subjects, from passionate adventures to sweet love, from fantasy and science fiction to suspense reasoning, no matter which genre you like, you can find your favorite works here. Its simple and intuitive interface design allows you to easily get started, quickly find the comics you want to read, and immerse yourself in the exciting comic world.
Baozi Comics (Entrance)_ Baozi Comics (New Entrance) 2025
Jun 05, 2025 pm 04:18 PM
Here, you can enjoy the vast ocean of comics and explore works of various themes and styles, from passionate young man comics to delicate and moving girl comics, from suspenseful and brain-burning mystery comics to relaxed and funny daily comics, there is everything, and there is always one that can touch your heartstrings. We not only have a large amount of genuine comic resources, but also constantly introduce and update the latest works to ensure that you can read your favorite comics as soon as possible.
b An latest registered address_How to register b An exchange
May 26, 2025 pm 07:12 PM
The latest official website of 2025b Announce is: https://www.marketwebb.co/zh-CN/join?ref=507720986&type=wenzi; Binance Exchange is a global cryptocurrency exchange that serves 180 countries and regions including North America, Europe, Taiwan, the Middle East, Hong Kong, and Malaysia. It provides more than 600 cryptocurrencies and has 270 million registered users worldwide.
