Download and install applet development tools
https://servicewechat.com/wxa-dev-logic/download_redirect?type=win32_x64&from=mpwiki&download_version=1062208010&version_type=1
Mini Program Official Documentation
https://mp.weixin.qq.com/
Create an applet project
Project file introduction (create a new page under the pages folder)
1. Components
text text
view area
button button
input form
image picture
main.wxml
<view class="title">小程序的单纯</view>
<view>赏金猎人</view>
<text>你好</text>
<text>喝杯二锅头</text>
<text>交个朋友</text>
<view>{
{
msg}}</view>
<input placeholder="搜索"></input>
<image class="img" src="/images/pic.jpeg"></image>
2. Template syntax
Text rendering: {
{}}
Conditional rendering: wx:if (similar to vue's v-if), wx:elif, wx:else
List rendering: wx:for, wx:key
Custom list: wx:for-
import, include
<view class="title">文本渲染</view>
<view>{
{
msg}}</view>
<view class="title">条件渲染</view>
<view wx:if="{
{isLog}}">欢迎回来</view>
<view class="title">多重条件渲染</view>
<view wx:if="{
{score>90}}">苹果电脑</view>
<view wx:elif="{
{score>80}}">小米电脑</view>
<view wx:elif="{
{score>70}}">苹果2斤</view>
<view wx:else>七匹狼伺候</view>
<view class="title">遍历</view>
<view wx:for="{
{list}}" wx:key="item">
{
{
index+1}}--{
{
item}}
</view>
<view class="title">自定义遍历</view>
<view wx:for="{
{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">
{
{
myind+1}}--{
{
myitem}}
</view>
<view class="title">模板</view>
<import src="/template/test"></import>
<template is="user" data="{
{...userInfo}}"></template>
<template is="user" data="{
{...userInfo2}}"></template>
<view class="title">include导入非template</view>
<!-- include 相当于拷贝，就是不拷贝template内容 -->
<include src="/template/test"></include>
<view>import只能导入模板template，include只能拷贝非template的内容</view>
The wxml under the js file template
run
3. Event (event parameter passing)
bindtap touch/click
bindchange value changes
bindconfirm confirm
bindinput input change
showToast WeChat's built-in method -- pop-up prompt
showMsg(e){
wx.showToast({
title: e.target.dataset.msg,
})
}
data-msg="" event parameter passing
<view class="title">事件</view>
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
<view class="title">事件-传参</view>
<button type="primary" size="mini" bindtap="showMsg" data-msg="我每天很开心">按钮1</button>
<button type="warn" size="mini" bindtap="showMsg" data-msg="你是我的解药">按钮2</button>
run
4. Two-way binding of forms
wxml
<view class="title">表单双向绑定</view>
<input
value="{
{msg}}"
bindinput="changeMsg"
type="text"
style="border:1rpx solid #ccc; margin:15rpx; padding:15rpx;"/>
<view>{
{msg}}</view>
js
changeMsg(e){
// 通过setData的方式更新msg,并更新视图
// e.detail.value获取表单的值
this.setData({
msg:e.detail.value})
}
run
5. Login
1. getUserProfile can only get the user's avatar and nickname, which cannot be used as a unique identifier to interact with the backend
01.wx.login() Get the code and send the code to your own server (you can also add userInfo)
02. Your own server sends code+appid+AppSecret to the WeChat server in exchange for the unique identifier openid
03. Login, registration, permission and other functions can be realized through openid
6. back to top
wx.pageScrollTo({
duration: 500, //时间
scrollTop:0, //位置
})
wx.pageScrollTo({
duration: 500,
selector:".share"
7. Upload pictures
wx.chooseMedia({
count:1})
wx.uploadFile({
filePath: res.tempFiles[0].tempFilePath
)}
8. Subcontracting
1. Subcontracting
"subpackages": [
{
"root": "news",
"pages": [
"pages/detail/detail"
]
}
]
2. Preload
"preloadRule": {
"pages/jok/jok": {
"network": "all",
"packages": [
"news"
]
}
}