您现在的位置是:首页 > 网页设计心得 > 程序人生程序人生

微信小程序语法|胜于蓝分享

胜于蓝2019-07-25【程序人生】人已围观

简介配置文件
app.json的配置(全局)

{
// 用来配置页面的路径
"pages":[
"pages/index/index", // 首页
"pages/Test/Test" // 跳转的页面
],

配置文件WjN胜于蓝|优秀个人博客
app.json的配置(全局)WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
{WjN胜于蓝|优秀个人博客
    // 用来配置页面的路径WjN胜于蓝|优秀个人博客
    "pages":[ WjN胜于蓝|优秀个人博客
        "pages/index/index", // 首页WjN胜于蓝|优秀个人博客
        "pages/Test/Test" // 跳转的页面WjN胜于蓝|优秀个人博客
    ],WjN胜于蓝|优秀个人博客
    "window":{WjN胜于蓝|优秀个人博客
        "enablePullDownRefresh": true, // 是否支持下拉刷新WjN胜于蓝|优秀个人博客
        "backgroundTextStyle":"dark", // 下拉刷新的字体颜色,支持lightWjN胜于蓝|优秀个人博客
        "backgroundColor": "#e04c4c", // 设置下拉刷新的背景颜色WjN胜于蓝|优秀个人博客
        "navigationBarBackgroundColor": "#fff", // 设置微信程序顶部导航栏颜色WjN胜于蓝|优秀个人博客
        "navigationBarTitleText": "yejiawei", // 顶部导航栏文字WjN胜于蓝|优秀个人博客
        "navigationBarTextStyle":"black" // 顶部导航栏文字样式,black或者whiteWjN胜于蓝|优秀个人博客
        "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    "tabBar": { // 设置tab切换栏的配置WjN胜于蓝|优秀个人博客
        "list": [WjN胜于蓝|优秀个人博客
            {WjN胜于蓝|优秀个人博客
                "pagePath": "pages/index/index", // 跳转的路径WjN胜于蓝|优秀个人博客
                "text": "首页", // tab的文字WjN胜于蓝|优秀个人博客
                "iconPath": "/images/t1.jpg" // 设置背景图路径WjN胜于蓝|优秀个人博客
            },WjN胜于蓝|优秀个人博客
            {WjN胜于蓝|优秀个人博客
                "pagePath": "pages/Test/Test",WjN胜于蓝|优秀个人博客
                "text": "测试",WjN胜于蓝|优秀个人博客
                "selectedIconPath": "/images/t1.jpg" // 设置选中时图片的路径WjN胜于蓝|优秀个人博客
            }WjN胜于蓝|优秀个人博客
        ],WjN胜于蓝|优秀个人博客
        "color": "#e04c4c", // 设置tab按钮字体颜色WjN胜于蓝|优秀个人博客
        "selectedColor": "#000", // 设置按钮选中的颜色WjN胜于蓝|优秀个人博客
        "backgroundColor": "#1aad16", // 设置tab按钮的背景颜色WjN胜于蓝|优秀个人博客
        "borderStyle": "black", // 设置tabbar边框颜色,只支持black/whiteWjN胜于蓝|优秀个人博客
        "position": "top" // 设置tabbar的位置,设置为top无法显示图片WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    "networkTimeout": {WjN胜于蓝|优秀个人博客
        "request": 10000, // request请求的超时时间WjN胜于蓝|优秀个人博客
        "connectSocket": 10000, // connectSocket的超时时间WjN胜于蓝|优秀个人博客
        "downloadFile": 10000, // 下载文件的超时时间WjN胜于蓝|优秀个人博客
        "uploadFile": 1000 // 上传文件的超时时间WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    "debug": true // 开启debug模式,在控制台输出程序信息WjN胜于蓝|优秀个人博客
}WjN胜于蓝|优秀个人博客
page.json的配置(页面)WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
设置的配置用来覆盖app.json中的window配置WjN胜于蓝|优秀个人博客
{WjN胜于蓝|优秀个人博客
    "navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色WjN胜于蓝|优秀个人博客
    "navigationBarTextStyle": "black", // 顶部导航栏文字样式,black或者whiteWjN胜于蓝|优秀个人博客
    "navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字WjN胜于蓝|优秀个人博客
    "backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色WjN胜于蓝|优秀个人博客
    "backgroundTextStyle": "light", // 下拉刷新的字体颜色,支持lightWjN胜于蓝|优秀个人博客
    "enablePullDownRefresh": true, // 是否支持下拉刷新WjN胜于蓝|优秀个人博客
    "disableScroll": true, // 是否支持滚动WjN胜于蓝|优秀个人博客
    "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置WjN胜于蓝|优秀个人博客
}WjN胜于蓝|优秀个人博客
程序入口函数(App)WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
App({WjN胜于蓝|优秀个人博客
    onLaunch: function (options) {WjN胜于蓝|优秀个人博客
        // 程序加载调用WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    onShow: function (options) {WjN胜于蓝|优秀个人博客
        // 从后台进入前台调用,默认程序第一次加载回调用WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    onHide: function () {WjN胜于蓝|优秀个人博客
        // 从前台切换到后台调用WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    onError: function (msg) {WjN胜于蓝|优秀个人博客
        // 程序报错调用WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    myFunc: function() {WjN胜于蓝|优秀个人博客
        // 自定义函数WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    globalData: {WjN胜于蓝|优秀个人博客
        // 全局自定义数据WjN胜于蓝|优秀个人博客
        userInfo: "yejiawei"WjN胜于蓝|优秀个人博客
    }WjN胜于蓝|优秀个人博客
})WjN胜于蓝|优秀个人博客
上面的onLaunch和onShow方法都有options参数,options参数里面有如下属性WjN胜于蓝|优秀个人博客
{WjN胜于蓝|优秀个人博客
    path: "pages/index/index" // 程序打开的路径WjN胜于蓝|优秀个人博客
    query: {}, // 当调用wx.navigateTo可以传递queryWjN胜于蓝|优秀个人博客
    scene: 1001, // 打开小程序的场景值WjN胜于蓝|优秀个人博客
    referrerInfo: { // 从其他程序中进入到此程序,会返回此字段WjN胜于蓝|优秀个人博客
        appId: ..., // 其他程序的appIdWjN胜于蓝|优秀个人博客
        extraData: ... // 其他程序传递过来的数据WjN胜于蓝|优秀个人博客
    }   WjN胜于蓝|优秀个人博客
}WjN胜于蓝|优秀个人博客
可以使用 var app = getApp(); 来获取小程序实例,console.log(app.globalData.userInfo)WjN胜于蓝|优秀个人博客
页面的入口函数(Page)WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
Page({WjN胜于蓝|优秀个人博客
    data: {WjN胜于蓝|优秀个人博客
        msg: "haha" // 页面的状态WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    onLoad: function(options) { // 页面加载完毕触发 },WjN胜于蓝|优秀个人博客
    onReady: function() { // 页面渲染完毕触发 },WjN胜于蓝|优秀个人博客
    onShow: function() { // 页面开始渲染触发 },WjN胜于蓝|优秀个人博客
    onHide: function() { // 页面切换到后台触发 },WjN胜于蓝|优秀个人博客
    onUnload: function() {  // 页面卸载触发 },WjN胜于蓝|优秀个人博客
    onPullDownRefresh: function() {  // 页面下拉刷新触发},WjN胜于蓝|优秀个人博客
    onReachBottom: function() { // 页面上滑触底触发 },WjN胜于蓝|优秀个人博客
    onShareAppMessage: function () { WjN胜于蓝|优秀个人博客
        // 页面点击转发触发,需要return一个object,只有定义了此方法,才会有转发的功能 WjN胜于蓝|优秀个人博客
        return {WjN胜于蓝|优秀个人博客
            title: "分享的页面", // 分享页面的标题WjN胜于蓝|优秀个人博客
            path: "/pages/logs/logs" // 分享的页面的路径WjN胜于蓝|优秀个人博客
        }WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    onPageScroll: function(options) { // 页面滚动触发 },WjN胜于蓝|优秀个人博客
    myFn: function() { // 自定义函数WjN胜于蓝|优秀个人博客
        console.log(this.route); // 获取当前页面的路径WjN胜于蓝|优秀个人博客
        this.setData({ // 修改状态WjN胜于蓝|优秀个人博客
            msg: "haha"WjN胜于蓝|优秀个人博客
        }, function() {WjN胜于蓝|优秀个人博客
            // 状态修改完,调用此方法WjN胜于蓝|优秀个人博客
        })WjN胜于蓝|优秀个人博客
        console.log(getCurrentPages()); // 获取当前页面栈实例WjN胜于蓝|优秀个人博客
    }WjN胜于蓝|优秀个人博客
    customData: { // 自定义属性 }WjN胜于蓝|优秀个人博客
})WjN胜于蓝|优秀个人博客
页面路由WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
方法wx.navigateTo(object) 跳转到指定的页面,无法跳转到tabbar页面(当前页保留)WjN胜于蓝|优秀个人博客
    wx.navigateTo({ WjN胜于蓝|优秀个人博客
        url: '/pages/logs/logs?id=1', // 页面路劲,可以传递query参数WjN胜于蓝|优秀个人博客
        success: function() { // 导航成功执行WjN胜于蓝|优秀个人博客
            console.log("跳转成功");WjN胜于蓝|优秀个人博客
        },WjN胜于蓝|优秀个人博客
        fail: function() { // 导航失败执行WjN胜于蓝|优秀个人博客
            console.log("跳转失败");WjN胜于蓝|优秀个人博客
        },WjN胜于蓝|优秀个人博客
        complete: function() { // 导航完成调用WjN胜于蓝|优秀个人博客
            console.log("导航结束");WjN胜于蓝|优秀个人博客
        }WjN胜于蓝|优秀个人博客
    })WjN胜于蓝|优秀个人博客
方法wx.navigateBack(object) 返回到之前的页面WjN胜于蓝|优秀个人博客
    wx.navigateBack({WjN胜于蓝|优秀个人博客
        delta: 2 // 后退2步WjN胜于蓝|优秀个人博客
    }) WjN胜于蓝|优秀个人博客
方法wx.redirectTo(object) 销毁当前页面,跳转到指定的页面,不能跳转到tabbar页面WjN胜于蓝|优秀个人博客
    使用方法和navigateTo一样WjN胜于蓝|优秀个人博客
方法wx.reLaunch(object) 销毁所有页面,跳转到任意指定的页面WjN胜于蓝|优秀个人博客
    使用方法和navigateTo一样WjN胜于蓝|优秀个人博客
方法wx.switchTab(object) 跳转到tabbar页面WjN胜于蓝|优秀个人博客
    使用方法和navigateTo一样WjN胜于蓝|优秀个人博客
模块化WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
js文件可以使用exports和module.exports暴露接口WjN胜于蓝|优秀个人博客
    exports是module.exports的一个引用WjN胜于蓝|优秀个人博客
    function fn () {WjN胜于蓝|优秀个人博客
        console.log("导入的方法执行了");WjN胜于蓝|优秀个人博客
    }WjN胜于蓝|优秀个人博客
    exports.fn = fn;WjN胜于蓝|优秀个人博客
使用文件中的方法WjN胜于蓝|优秀个人博客
    var common  = require('../common.js');WjN胜于蓝|优秀个人博客
    common.fn();WjN胜于蓝|优秀个人博客
WXML文件细节WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
状态绑定WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
变量使用双大括号包裹 <view>{{msg}}</view>WjN胜于蓝|优秀个人博客
标签的属性使用双引号包裹 <view id="item"></view>WjN胜于蓝|优秀个人博客
双引号里面的内容wx都会将其转化成字符串,所以true,false要表达本意需要再包裹双大括号WjN胜于蓝|优秀个人博客
绑定对象,不需要对象的花括号 <template is="mytemplate" data="{{ a: 1, b: 2 }}"></template>WjN胜于蓝|优秀个人博客
列表遍历WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
<view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">WjN胜于蓝|优秀个人博客
    {{index}}: {{item}}WjN胜于蓝|优秀个人博客
</view>WjN胜于蓝|优秀个人博客
给index和item取别名WjN胜于蓝|优秀个人博客
    <view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">WjN胜于蓝|优秀个人博客
        {{myIndex}}: {{myItem}}WjN胜于蓝|优秀个人博客
    </view>WjN胜于蓝|优秀个人博客
渲染多节点代码块WjN胜于蓝|优秀个人博客
    <block wx:for="{{[1, 2, 3]}}">WjN胜于蓝|优秀个人博客
        <view> {{index}}: </view>WjN胜于蓝|优秀个人博客
        <view> {{item}} </view>WjN胜于蓝|优秀个人博客
    </block>WjN胜于蓝|优秀个人博客
遍历字符串WjN胜于蓝|优秀个人博客
    <view wx:for="array">WjN胜于蓝|优秀个人博客
        {{item}}WjN胜于蓝|优秀个人博客
    </view>WjN胜于蓝|优秀个人博客
绑定key,当组件重排后根据id可以复用组件和组件的状态WjN胜于蓝|优秀个人博客
    <block wx:for="{{[1, 2, 3]}}" wx:key="*this"> // 当item是字符串或者数字可以使用*this代表item作为keyWjN胜于蓝|优秀个人博客
        <view> {{index}}: </view>WjN胜于蓝|优秀个人博客
        <view> {{item}} </view>WjN胜于蓝|优秀个人博客
    </block>WjN胜于蓝|优秀个人博客
条件渲染WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
<view wx:if="{{false}}">haha</view>WjN胜于蓝|优秀个人博客
<view wx:elif="{{true}}">haha1</view>WjN胜于蓝|优秀个人博客
<view wx:else="{{false}}">haha2</view>WjN胜于蓝|优秀个人博客
同样也可以使用block来控制多节点代码块WjN胜于蓝|优秀个人博客
模板WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
声明一个模板WjN胜于蓝|优秀个人博客
    <template name="mytemplate">WjN胜于蓝|优秀个人博客
        <view>WjN胜于蓝|优秀个人博客
            {{a}}: {{b}}WjN胜于蓝|优秀个人博客
        </view>WjN胜于蓝|优秀个人博客
    </template>WjN胜于蓝|优秀个人博客
使用此模板 obj: { a: 1, b: 2 }WjN胜于蓝|优秀个人博客
    <template is="mytemplate" data="{{...obj}}"></template>WjN胜于蓝|优秀个人博客
事件WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
使用bindtap绑定事件 <view bindtap="myFn" data-my-data="222"></view>WjN胜于蓝|优秀个人博客
事件对象WjN胜于蓝|优秀个人博客
    myFn: function(event) {WjN胜于蓝|优秀个人博客
        console.log(event);WjN胜于蓝|优秀个人博客
        // 使用data开头的自定义属性,将保存再event.currentTarget.dataset中WjN胜于蓝|优秀个人博客
    }WjN胜于蓝|优秀个人博客
事件分类WjN胜于蓝|优秀个人博客
    冒泡事件WjN胜于蓝|优秀个人博客
        touchstart 开始触摸WjN胜于蓝|优秀个人博客
        touchmove 触摸移动WjN胜于蓝|优秀个人博客
        touchcancel 触摸打断WjN胜于蓝|优秀个人博客
        touchend 触摸离开WjN胜于蓝|优秀个人博客
        tap 瞬间触摸WjN胜于蓝|优秀个人博客
        longpress 超过350ms的触摸WjN胜于蓝|优秀个人博客
        transitionend 过渡结束WjN胜于蓝|优秀个人博客
        animationstart 动画开始WjN胜于蓝|优秀个人博客
        animationiteration 动画执行一遍后触发WjN胜于蓝|优秀个人博客
        animationend 动画结束触发WjN胜于蓝|优秀个人博客
    非冒泡事件,除了上述事件以外都是非冒泡事件WjN胜于蓝|优秀个人博客
绑定事件WjN胜于蓝|优秀个人博客
    可以使用bind和catch绑定WjN胜于蓝|优秀个人博客
        bindtap或者bind:tap 不阻止冒泡 WjN胜于蓝|优秀个人博客
        catchtap或者catch:tap 阻止冒泡WjN胜于蓝|优秀个人博客
在WXML文件中导入其他WXML文件WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
可以将上面讲的template代码,放到一个单独的wxml文件中,然后在当前文件中使用 <import src="../common.wxml" /> 导入,就可以立即使用了WjN胜于蓝|优秀个人博客
而<include src="../common.wxml" />的作用,是将除了template和wxs以外的代码,都拷贝到include所在的位置WjN胜于蓝|优秀个人博客
wxs的使用(代码可以单独写在wxs文件中,也可以写在wxs标签中)WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
模块WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
wxs的作用其实和js文件的作用是一样的,只不过提供了另外一种方式来写jsWjN胜于蓝|优秀个人博客
外界要访问wxs中定义的代码需要使用module.exports导出WjN胜于蓝|优秀个人博客
    创建一个wxs文件,定义如下代码WjN胜于蓝|优秀个人博客
        var message = "你好吗?";WjN胜于蓝|优秀个人博客
        module.exports.message = message;WjN胜于蓝|优秀个人博客
    在wxml文件中使用WjN胜于蓝|优秀个人博客
        首先使用wxs标签导入 <wxs src="../common.wxs" module="wxsData"/>WjN胜于蓝|优秀个人博客
        使用 <view class="demo">{{wxsData.message}}</view>WjN胜于蓝|优秀个人博客
    在其他wxs文件中使用   WjN胜于蓝|优秀个人博客
        var wxsData = require("../common.wxs");WjN胜于蓝|优秀个人博客
WXSS文件WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
尺寸单位使用rpx,一个rpx就代表一个物理像素WjN胜于蓝|优秀个人博客
导入其他WXSS文件 @import "../common.wxss";WjN胜于蓝|优秀个人博客
自定义组件(和vue里面的组件类似)WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
创建自定义组件的步骤WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
第一步,修改jsonWjN胜于蓝|优秀个人博客
    修改json文件为 { "component": true }WjN胜于蓝|优秀个人博客
第二部,WXML文件书写WjN胜于蓝|优秀个人博客
    <view class="demo"> {{text}} </view>WjN胜于蓝|优秀个人博客
    <slot></slot>WjN胜于蓝|优秀个人博客
    slot就是插槽,和vue的一样WjN胜于蓝|优秀个人博客
第三步,WXSS中书写WjN胜于蓝|优秀个人博客
    .demo{ color: red; }WjN胜于蓝|优秀个人博客
    只能使用类选择器WjN胜于蓝|优秀个人博客
第四部,js文件中写WjN胜于蓝|优秀个人博客
    Component({WjN胜于蓝|优秀个人博客
        properties: {WjN胜于蓝|优秀个人博客
            // 组件的属性,可以指定类型和默认值,和vue的props验证很像WjN胜于蓝|优秀个人博客
            text: {WjN胜于蓝|优秀个人博客
                type: String,WjN胜于蓝|优秀个人博客
                value: '默认值',WjN胜于蓝|优秀个人博客
            }WjN胜于蓝|优秀个人博客
        },WjN胜于蓝|优秀个人博客
        data: {WjN胜于蓝|优秀个人博客
            // 组件的状态WjN胜于蓝|优秀个人博客
            someData: {}WjN胜于蓝|优秀个人博客
        },WjN胜于蓝|优秀个人博客
        methods: {WjN胜于蓝|优秀个人博客
            // 组件的自定义方法WjN胜于蓝|优秀个人博客
            customMethod: function () { }WjN胜于蓝|优秀个人博客
        }WjN胜于蓝|优秀个人博客
    })WjN胜于蓝|优秀个人博客
第五步,使用组件WjN胜于蓝|优秀个人博客
    在要使用此自定义组件的page中,修改他的json,插入如下字段WjN胜于蓝|优秀个人博客
        "usingComponents": {WjN胜于蓝|优秀个人博客
            "my-component": "../myComponent/myComponent"WjN胜于蓝|优秀个人博客
        }WjN胜于蓝|优秀个人博客
    在page组件中使用 <my-component></my-component> 即可WjN胜于蓝|优秀个人博客
    同时可以使用 <my-component text="我是传递的属性"></my-component> 传递属性值给组件内部WjN胜于蓝|优秀个人博客
WXML文件的细节WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
写法和一般的WXML文件写法一致,不过多了slotWjN胜于蓝|优秀个人博客
没有名字的slot只能有一个,如果要使用多个slot,需要操作如下几步WjN胜于蓝|优秀个人博客
第一步,在js中的Component函数中,添加如下WjN胜于蓝|优秀个人博客
    options: {WjN胜于蓝|优秀个人博客
        multipleSlots: trueWjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
第二步,在WXML中写多个带名字的slotWjN胜于蓝|优秀个人博客
    <view class="demo"> {{text}} </view>WjN胜于蓝|优秀个人博客
    <slot name="a"></slot>WjN胜于蓝|优秀个人博客
    <slot name="b"></slot>WjN胜于蓝|优秀个人博客
第三步,在页面中使用WjN胜于蓝|优秀个人博客
    <my-component text="我是传递的属性">WjN胜于蓝|优秀个人博客
        <view slot="a">我是a</view>WjN胜于蓝|优秀个人博客
        <view slot="b">我是b</view>WjN胜于蓝|优秀个人博客
    </my-component>WjN胜于蓝|优秀个人博客
WXSS文件的细节WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
只能使用类选择器WjN胜于蓝|优秀个人博客
可以继承组件外的样式WjN胜于蓝|优秀个人博客
app.wxss文件中定义的样式,对组件无效WjN胜于蓝|优秀个人博客
另外可以使用:host来定义组件标签的样式WjN胜于蓝|优秀个人博客
    :host{ color: black; }WjN胜于蓝|优秀个人博客
js文件的细节WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
Component函数的使用如下WjN胜于蓝|优秀个人博客
Component({WjN胜于蓝|优秀个人博客
    properties: { // 设置组件接受的属性WjN胜于蓝|优秀个人博客
        myProperty1: { // 属性名WjN胜于蓝|优秀个人博客
            type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)WjN胜于蓝|优秀个人博客
            value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个WjN胜于蓝|优秀个人博客
            observer: function(newVal, oldVal){ // 监听属性值改变的函数 } WjN胜于蓝|优秀个人博客
        },WjN胜于蓝|优秀个人博客
        myProperty2: String // 简化的定义方式WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    data: {}, // 组件状态WjN胜于蓝|优秀个人博客
    methods: { // 设置方法WjN胜于蓝|优秀个人博客
        onMyButtonTap: function(){WjN胜于蓝|优秀个人博客
            console.log(this.id); // 组件标签的idWjN胜于蓝|优秀个人博客
            console.log(this.dataset); // 组件的data自定义属性集合WjN胜于蓝|优秀个人博客
            console.log(this.data); // 组件的属性和状态的集合WjN胜于蓝|优秀个人博客
            console.log(this.hasBehavior()) // 组件是否有behavior属性WjN胜于蓝|优秀个人博客
            this.setData({}) // 属性和状态都可以设置 WjN胜于蓝|优秀个人博客
            /*WjN胜于蓝|优秀个人博客
                可以手动触发组件的自定义事件,比如,组件上绑定了一个自定义事件WjN胜于蓝|优秀个人博客
                <my-component bindmyEvent="myFn"></my-component>WjN胜于蓝|优秀个人博客
                要手动触发myEvent,需要调用 WjN胜于蓝|优秀个人博客
                    this.triggerEvent('myEvent', { WjN胜于蓝|优秀个人博客
                        // 事件参数 WjN胜于蓝|优秀个人博客
                        }, { WjN胜于蓝|优秀个人博客
                            bubbles: true, // 是否冒泡WjN胜于蓝|优秀个人博客
                            composed: true, // 到父组件内部寻找同名事件WjN胜于蓝|优秀个人博客
                            capturePhase: true // 是否捕获WjN胜于蓝|优秀个人博客
                        }WjN胜于蓝|优秀个人博客
                    );WjN胜于蓝|优秀个人博客
            */WjN胜于蓝|优秀个人博客
        }WjN胜于蓝|优秀个人博客
    },WjN胜于蓝|优秀个人博客
    created: function(){}, // 组件在内存中创建完毕执行WjN胜于蓝|优秀个人博客
    attached: function(){}, // 组件挂载之前执行WjN胜于蓝|优秀个人博客
    ready: function() {}, // 组件挂载后执行WjN胜于蓝|优秀个人博客
    detached: function(){}, // 组件移除执行WjN胜于蓝|优秀个人博客
    moved: function(){}, // 组件移动的时候执行WjN胜于蓝|优秀个人博客
    relations: {WjN胜于蓝|优秀个人博客
        /*WjN胜于蓝|优秀个人博客
            嵌套的组件需要相互关联就要使用此字段WjN胜于蓝|优秀个人博客
            相同嵌套子节点的处理方式WjN胜于蓝|优秀个人博客
                假设嵌套的html结构如下WjN胜于蓝|优秀个人博客
                    <custom-ul>WjN胜于蓝|优秀个人博客
                        <custom-li> item 1 </custom-li>WjN胜于蓝|优秀个人博客
                        <custom-li> item 2 </custom-li>WjN胜于蓝|优秀个人博客
                    </custom-ul>WjN胜于蓝|优秀个人博客
                则custom-li组件中需要定义如下的relationsWjN胜于蓝|优秀个人博客
                './custom-ul': { // 嵌套父组件的路径WjN胜于蓝|优秀个人博客
                    type: 'parent', // 关联的目标节点应为父节点WjN胜于蓝|优秀个人博客
                    linked: function(target) { }, // custom-li插入到custom-ul时执行,target是custom-ulWjN胜于蓝|优秀个人博客
                    linkChanged: function(target) { }, // custom-li被移动后执行,target是custom-ulWjN胜于蓝|优秀个人博客
                    unlinked: function(target) {  } // custom-li被移除时执行,target是custom-ulWjN胜于蓝|优秀个人博客
                }WjN胜于蓝|优秀个人博客
                在custom-ul组件中也要定义此字段,只不过反过来 type 改成 childWjN胜于蓝|优秀个人博客
            不同嵌套子节点的处理方式WjN胜于蓝|优秀个人博客
                <custom-div>WjN胜于蓝|优秀个人博客
                    <custom-span> item 1 </custom-span>WjN胜于蓝|优秀个人博客
                    <custom-div> item 2 </custom-div>WjN胜于蓝|优秀个人博客
                </custom-div>WjN胜于蓝|优秀个人博客
                此时就要使用behavior作为公共的节点路径了,假设custom-span和custom-div都有一个名为customFormControls的behaviorWjN胜于蓝|优秀个人博客
                custom-span和custom-div内部定义relations的方式和之前一样,只不过将type改成ancestorWjN胜于蓝|优秀个人博客
                custom-div中定义WjN胜于蓝|优秀个人博客
                    'customFormControls': {WjN胜于蓝|优秀个人博客
                        type: 'descendant', // 关联的目标节点应为子孙节点WjN胜于蓝|优秀个人博客
                        target: customFormControlsWjN胜于蓝|优秀个人博客
                    }WjN胜于蓝|优秀个人博客
        */WjN胜于蓝|优秀个人博客
    }, WjN胜于蓝|优秀个人博客
    behaviors: [WjN胜于蓝|优秀个人博客
        /*WjN胜于蓝|优秀个人博客
            behaviors的作用就是用来创建一个公用的组件js,内部代码和Component一模一样WjN胜于蓝|优秀个人博客
            Behavior({ //... })WjN胜于蓝|优秀个人博客
            主要用来和当前的Component代码合并,同名的属性以当前组件的为主WjN胜于蓝|优秀个人博客
        */WjN胜于蓝|优秀个人博客
    ]WjN胜于蓝|优秀个人博客
})WjN胜于蓝|优秀个人博客
按需加载WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
实现按需加载的步骤如下WjN胜于蓝|优秀个人博客
主包中应只包含tabbarWjN胜于蓝|优秀个人博客
第一步,在项目根目录下创建分包的文件夹,将分包的page写在里面WjN胜于蓝|优秀个人博客
第二步,在app.json中添加如下配置WjN胜于蓝|优秀个人博客
    "subPackages": [WjN胜于蓝|优秀个人博客
        {WjN胜于蓝|优秀个人博客
            "root": "package1", // 分包文件夹根路径WjN胜于蓝|优秀个人博客
    WjN胜于蓝|优秀个人博客
       "pages": [ // 分包中包含的路径,不能添加到app.json的page中WjN胜于蓝|优秀个人博客
WjN胜于蓝|优秀个人博客
                "pages/Demo/Demo"WjN胜于蓝|优秀个人博客
            ]WjN胜于蓝|优秀个人博客
        }WjN胜于蓝|优秀个人博客
    ]WjN胜于蓝|优秀个人博客
    在tabbar配置项中,不能应用分包的页面WjN胜于蓝|优秀个人博客
第三步,使用分包文件WjN胜于蓝|优秀个人博客
    在tabbar的页面中,引用分包页WjN胜于蓝|优秀个人博客
    wx.navigateTo({WjN胜于蓝|优秀个人博客
        url: '../../package1/pages/Demo/Demo'WjN胜于蓝|优秀个人博客
    })

Tags:

很赞哦! ()

文章评论

当前时间

快速排名

  • 网站建设|万词霸屏,企业软文推广,刷下拉框
  • 快速排名:不用再等SEO三个月,只需3-7天即可把行业关键词覆盖百度搜索引擎首页,点击不收费,排名报表,真实访问量报表一目了然。

合作加盟

  • 扫码请注明来意,否则不会通过
  • 填写商户姓名不要带有“超市”,“便利店” ,“百货”等
  • 扫码成为快钱代理
  • 扫码加站长微信,为您推荐快钱总部负责人
  • 快钱POSS机(电签版)
  • 1,免押版:签约费率快捷交易0.38%,常规交易0.65%
  • 贷记卡单笔≥3000元视为激活
  • 2,,有押版:签约快捷交易0.38%,常规交易0.65%
  • 激活首刷≥99元,扣除99元系统服务费,多出部分shishi到账
  • 电签版ipos参与每月扶持奖励
  • 电签版ipos与Mpos单独考核台均
  • 30台以上有效激活奖励3000元扶持金
  • 当月交易额≥3000元的为活跃用户

本站推荐

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计7074篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 扫描二维码:请注明来意,否则不会通过
  • 微信号:扫描二维码,关注我们
歌名 - 歌手
0:00