微信小程序常用功能
1、全局变量的声明
在app.js中声明
App({
globalData:{
id:0 //id就可以在整个项目中的每个js里随便调用
}
})
获取全局变量
var id = getApp().globalData.id;
修改全局变量
var app = getApp();
app.globalData.id = res;
2、提示信息
wx.showModal({ title: '内容不能为空', icon: '', duration: 2000 });//对话框提示
wx.showToast({ title: '添加成功', icon: 'success', duration: 2000 });//普通提示
3、上传API(获取类似)
wx.request({
url: '服务器地址',
data: { openId: "1", },//上传内容
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
method: "POST",
success: res => {
},
error: res => {
}
})
4、组件
自定义组件
为了更灵活的页面布局,需要自定义所需的组件,比如tabs选项卡。
创建自定义组件
a.在 json 文件中进行自定义组件声明(将 component 字段设为 true 可这一组文件设为自定义组件):
.json文件:
{
"component": true
}
b. .wxml文件:
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">{{innerText}}</view>
<slot></slot>
.wxss文件:
/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。最好使用类名选择器。
c. .js文件:
自定义组件的 js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法
Component({
properties: {
// 这里定义了innerText属性,属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod() {}
}
})
使用自定义组件
a.首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:
.json文件:
{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}
节点名即自定义组件的标签名
b. .wxml文件
<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>
自定义组件的 wxml 节点结构在与数据结合之后,将被插入到引用位置内。