当前位置:网站首页>Wechat applet Foundation
Wechat applet Foundation
2022-07-02 06:51:00 【Rivers I】
Catalog
Basics
view Equivalent to div
text amount to span
block Equivalent to a non rendered label
It's just a packaging element , No rendering in the page , Only accept control properties
<block wx:for="{
{header}}" wx:key="index">
<view class="lists" data-text="{
{item}}" bindtap="gotourl">
{
{
item.name}}
</view>
</block>
Usage of pictures , It's a double label , and html Not quite the same.
/ It's the root , Find from the root
<image src="/images/home.png"></image>
Input box input It's a single label , Yes /
<input type="text" value="" />
navigator amount to a label , Be careful , Don't forget to ulr There is another one at the beginning of the address /
<navigator url="/pages/video/video"> Video playback </navigator>
Page in deta The data in can be used directly in the page
<view>{
{
name}}</view>
Page({
data: {
username:" Zhang San "
}
})
Bottom navigation Tabbar
Bottom navigation bar , In the document requirements given on the applet item least 2 individual , Up to five .
app.json Chinese content
{
"pages":[
"pages/index/index", Write the first one and you'll be the first
"pages/logs/logs",
"pages/mine/mine"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": " home page ",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color": "#a9b7b7", When not selected The color of the bottom navigation text
"selectedColor": "#11cd6e", When choosing The color of the bottom navigation text
"borderStyle": "black" , The sample color of the bottom navigation border ( Be careful If there is no writing style here It can lead to The default light gray line appears on the top border of the navigation box )
"list": [{
Navigation configuration array
"selectedIconPath": "images/icon_consult_press.png", When selected Icon path
"iconPath": "images/icon_consult.png", When not selected Icon path
"pagePath": "pages/index/index", Page access address
"text": " home page " The text below the navigation icon
}, {
"selectedIconPath": "images/icon_invest_press.png",
"iconPath": "images/icon_invest.png",
"pagePath": "pages/logs/logs",
"text": " One yuan investment "
},{
"selectedIconPath": "images/icon_mine_press.png",
"iconPath": "images/icon_mine.png",
"pagePath": "pages/mine/mine",
"text": " my "
}
]
}
}
Be careful : Of each page json Documents cannot be removed navigationBarTitleText This attribute . Otherwise, an error will be reported ( Even if it's not a bottom navigation Tabbar page )
When he is not a tabbar When the page is ,list There is no configuration in , but pages The middle path should be written , It's a normal page , Use the same as others , It's just that the way of page Jump is different
The middle of the page json Document interpretation
{
"usingComponents": {
"abc":"/compent/abc/abc" Place the reference address of the custom component
},
"backgroundTextStyle": "dark", The drop-down loading The style of , Support only dark / light
"navigationBarBackgroundColor": "#04be02", Navigation bar background color , Such as #000000( Must be 6 position )
"navigationBarTitleText": " Homework ", Navigation bar title text content
"navigationBarTextStyle": "black" Navigation bar Title Color , Support only black / white
}
Customize tabbar
tabbar When the style of cannot meet the demand , You need to customize it tabbar
stay app.json Medium tabBar Item designation custom The field values for true
Official documents :https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
Custom components
Create an empty file inside the root element compent, A folder is being built inside abc( Built in Page), This is a component level page
The writing and pages Large pages How can it be used in the homepage
In the files to be imported , find .json Postfix file , Write full path
{
"usingComponents": {
"abc":"/compent/abc/abc"
}
}
And then in wxml Use... In the document
<view> Home page content {
{
username}}</view>
<image src="/images/home-ed.png"></image>
<!-- Custom components -->
<abc text=" Customize the content of the component "></abc>
How events are used
bindtap
Bind an event handler in the component .
Such as bindtap, When the user clicks the component, it will be corresponding to Page Find the corresponding event handler function in .
<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>
Corresponding Page Write the corresponding event handler function in the definition , Parameter is event.
Page({
tapName: function(event) {
console.log(event)
}
})
bindChange
bindChange A change event occurs for the input box . Wechat provides bindchange There are also minor problems in support ,
At present, it is the loss of focus that can trigger the occurrence of this event .
picker
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
Development –> Form components
A rolling selector that pops up from the bottom .
Example :
<picker mode="region" bindchange="region">
//mode="region" It's a provincial and urban selector , See other documents
//bindchange="region" Yes, here is the form click event
<view class="citys">
<view>
<txt>{
{
citys[0]}}</txt>
<txt>{
{
citys[1]}}</txt>
</view>
</picker>
There are several ways to jump pages
Official wechat documents –>api–> route
wx.switchTab
Jump to tabBar page , And shut down all the others tabBar page
navigator label
Keep the current page , Jump to a page in the app . But you can't jump to tabbar page .
wx.navigateTo
Keep the current page , Jump to a page in the app . But you can't jump to tabbar page wx.navigateBack
Close current page , Go back to the previous page or multi-level page
wx.redirectTo
Close current page , Jump to a page in the app . But you are not allowed to jump to tabbar page
When using the navigateTo When , Can be used navigateBack
Jump between pages to use navigator label ,wx.navigateTo ,wx.redirectTo
1、URL It's the path to the jump page . In the above code is navigator In the catalog navigator page ,title Is the parameter .
navigator Next redirect Property is the value opened on the current page . If not redirect Just jump to the new page . Can carry parameters .
If you need to pass multiple parameters , use & Link to
<navigator url="../navigator/navigator?title= I am a navigate" > Jump to a new page </navigator>
<navigator url="../redirect/redirect?title= I am a redirect"
open-type="redirect"
> Open on current page </navigator>
perhaps
// Jump to a new page
wx.navigateTo({
url: "../navigator/navigator?title= I am a navigate"
})
// Open on current page
wx.redirectTo({
url: ../redirect/redirect?title= I am a redirect"
})
2、 In the jump js The code can get title Parameters
Page({
data:{
title: "",
},
onLoad: function(options) {
// a key
this.setData({
title: options.title
})
}
})
wx:for and wx:for-item The connection of
wx:for Is a circular array ,wx:for-item Alias the list , It is generally used to specify the reference field name in the second level and above loops ;
{
{
item.id}}
<view wx:for="{
{item.childList}}" wx:for-item="str">
{
{
str.name}}{
{
str.account}}
</view>
</view>
change data Data in
Official website :https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#Page.prototype.setData(Object%20data,%20Function%20callback)
data Is the initial data used for the first rendering of the page .
this.setData({
text: ' Set some for updating the view data data .'
}, function() {
// This is a this setData ( Fallback function )callback
})
},
this.setData({
text: ' Set some for updating the view data data .'
},() => {
this.setData({
// This is a this setData ( Fallback function )callback
})
})
stay js In file , To call a method name, use this. Method name ()
Applet gets node binding data data-index Methods
Can be used to tab Switch Dynamic binding class name of style
wxml
<view class="top">
<view data-type="reduce"
data-id="{
{
1}}"
data-index="{
{
index}}"
bindtap="a"
id="aabb"
> Click to get some values </view>
</view>
js
data: {
index:22
},
// Event handler
a(e) {
console.log(e.currentTarget);
},
Output results :
Get element location
Official wechat development document new method description address :https://developers.weixin.qq.com/miniprogram/dev/api/NodesRef.boundingClientRect.html
Wechat applet obtains element height and width
1. Create nodes
var query = wx.createSelectorQuery();
2. binding DOM
query.select('#box').boundingClientRect()
3. Get element information
query.exec(function (res) {
//console.log(res);
console.log(res[0].height);
})
total : Abbreviate together ( Including binding )
var query = wx.createSelectorQuery();
query.select("#scroll").boundingClientRect((rect)=> {
console.log(rect.height)//width etc.
}).exec();
Page({
getRect () {
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
rect.id // Node ID
rect.dataset // Node dataset
rect.left // The left boundary coordinates of the node
rect.right // Right boundary coordinates of nodes
rect.top // Upper boundary coordinates of nodes
rect.bottom // Lower boundary coordinates of nodes
rect.width // The width of the node
rect.height // The height of the node
}).exec()
},
getAllRects () {
wx.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
rects.forEach(function(rect){
rect.id // Node ID
rect.dataset // Node dataset
rect.left // The left boundary coordinates of the node
rect.right // Right boundary coordinates of nodes
rect.top // Upper boundary coordinates of nodes
rect.bottom // Lower boundary coordinates of nodes
rect.width // The width of the node
rect.height // The height of the node
})
}).exec()
}
})
// Get elements ( Each category of goods is away from the top ) Offset value
getOffset(){
const query=wx.createSelectorQuery();
query.selectAll('.navright').boundingClientRect()
query.exec((res)=>{
console.log(res[0].map(item=>item.top));
this.setData({
offsetTop:res[0].map(item=>item.top)
})
})
},
Click to scroll to the corresponding position
be used scroll-into-view
Add... Inside the matching that needs to be rolled id
Rotation samples
<swiper class="swip" indicator-color="rgb(204, 204, 204)" indicator-active-color="#fff"
indicator-dots="true" autoplay="true" interval="3000" circular="false">
<swiper-item>
<image src="https://www.huilinet.cn/Areas/Mobile/Content/images/slide03.jpg"></image>
</swiper-item>
<swiper-item>
<image src="https://www.huilinet.cn/Areas/Mobile/Content/images/slide03.jpg"> </image>
</swiper-item>
</swiper>
边栏推荐
- uniapp引入本地字体
- Alibaba cloud MFA binding Chrome browser
- ModuleNotFoundError: No module named ‘jieba. analyse‘; ‘ jieba‘ is not a package
- No process runs when querying GPU, but the video memory is occupied
- Uploading attachments using Win32 in Web Automation
- Selenium memo: selenium\webdriver\remote\remote_ connection. Py:374: resourcewarning: unclosed < XXXX > solution
- unittest.TextTestRunner不生成txt测试报告
- 20210306转载如何使TextEdit有背景图片
- js删除字符串的最后一位
- MySQL index
猜你喜欢
Win10: add or delete boot items, and add user-defined boot files to boot items
Shardingsphere JDBC
qq邮箱接收不到jenkins构建后使用email extension 发送的邮件(timestamp 或 auth.......)
web自动中利用win32上传附件
table 组件指定列合并行方法
In depth study of JVM bottom layer (3): garbage collector and memory allocation strategy
ZZQ的博客目录--更新于20210601
Latex error: the font size command \normalsize is not defined problem solved
Latex 报错 LaTeX Error: The font size command \normalsize is not defined问题解决
Usage of map and foreach in JS
随机推荐
CUDA and Direct3D consistency
Win10桌面图标没有办法拖动(可以选中可以打开可以删除新建等操作但是不能拖动)
Self study table Au
Overload global and member new/delete
部署api_automation_test过程中遇到的问题
看完有用的blog
Dynamic global memory allocation and operation in CUDA
web自动中利用win32上传附件
js判断数组中对象是否存在某个值
Solve the problem of bindchange event jitter of swiper component of wechat applet
js删除字符串的最后一个字符
Sentry construction and use
【文献阅读与想法笔记13】 Unprocessing Images for Learned Raw Denoising
VSCODE 安装LATEX环境,参数配置,常见问题解决
pytest(2) mark功能
apt命令报证书错误 Certificate verification failed: The certificate is NOT trusted
[daily question] - Huawei machine test 01
[self cultivation of programmers] - Reflection on job hunting Part II
ModuleNotFoundError: No module named ‘jieba. analyse‘; ‘ jieba‘ is not a package
[literature reading and thought notes 13] unprocessing images for learned raw denoising