码迷,mamicode.com
首页 > 微信 > 详细

微信小程序基础语法总结

时间:2018-01-08 16:38:43      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:glob   onload   进入   number   首页   network   control   0ms   应用   

本文介绍微信小程序语法

  1. 配置文件

    app.json的配置(全局)

    {
        // 用来配置页面的路径
        "pages":[ 
            "pages/index/index", // 首页
            "pages/Test/Test" // 跳转的页面
        ],
        "window":{
            "enablePullDownRefresh": true, // 是否支持下拉刷新
            "backgroundTextStyle":"dark", // 下拉刷新的字体颜色,支持light
            "backgroundColor": "#e04c4c", // 设置下拉刷新的背景颜色
            "navigationBarBackgroundColor": "#fff", // 设置微信程序顶部导航栏颜色
            "navigationBarTitleText": "yejiawei", // 顶部导航栏文字
            "navigationBarTextStyle":"black" // 顶部导航栏文字样式,black或者white
            "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
        },
        "tabBar": { // 设置tab切换栏的配置
            "list": [
                {
                    "pagePath": "pages/index/index", // 跳转的路径
                    "text": "首页", // tab的文字
                    "iconPath": "/images/t1.jpg" // 设置背景图路径
                },
                {
                    "pagePath": "pages/Test/Test",
                    "text": "测试",
                    "selectedIconPath": "/images/t1.jpg" // 设置选中时图片的路径
                }
            ],
            "color": "#e04c4c", // 设置tab按钮字体颜色
            "selectedColor": "#000", // 设置按钮选中的颜色
            "backgroundColor": "#1aad16", // 设置tab按钮的背景颜色
            "borderStyle": "black", // 设置tabbar边框颜色,只支持black/white
            "position": "top" // 设置tabbar的位置,设置为top无法显示图片
        },
        "networkTimeout": {
            "request": 10000, // request请求的超时时间
            "connectSocket": 10000, // connectSocket的超时时间
            "downloadFile": 10000, // 下载文件的超时时间
            "uploadFile": 1000 // 上传文件的超时时间
        },
        "debug": true // 开启debug模式,在控制台输出程序信息
    }

    page.json的配置(页面)

    设置的配置用来覆盖app.json中的window配置
    {
        "navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色
        "navigationBarTextStyle": "black", // 顶部导航栏文字样式,black或者white
        "navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字
        "backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色
        "backgroundTextStyle": "light", // 下拉刷新的字体颜色,支持light
        "enablePullDownRefresh": true, // 是否支持下拉刷新
        "disableScroll": true, // 是否支持滚动
        "onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
    }
  2. 程序入口函数(App)

    App({
        onLaunch: function (options) {
            // 程序加载调用
        },
        onShow: function (options) {
            // 从后台进入前台调用,默认程序第一次加载回调用
        },
        onHide: function () {
            // 从前台切换到后台调用
        },
        onError: function (msg) {
            // 程序报错调用
        },
        myFunc: function() {
            // 自定义函数
        },
        globalData: {
            // 全局自定义数据
            userInfo: "yejiawei"
        }
    })
    上面的onLaunch和onShow方法都有options参数,options参数里面有如下属性
    {
        path: "pages/index/index" // 程序打开的路径
        query: {}, // 当调用wx.navigateTo可以传递query
        scene: 1001, // 打开小程序的场景值
        referrerInfo: { // 从其他程序中进入到此程序,会返回此字段
            appId: ..., // 其他程序的appId
            extraData: ... // 其他程序传递过来的数据
        }   
    }
    可以使用 var app = getApp(); 来获取小程序实例,console.log(app.globalData.userInfo)
  3. 页面的入口函数(Page)

    Page({
        data: {
            msg: "haha" // 页面的状态
        },
        onLoad: function(options) { // 页面加载完毕触发 },
        onReady: function() { // 页面渲染完毕触发 },
        onShow: function() { // 页面开始渲染触发 },
        onHide: function() { // 页面切换到后台触发 },
        onUnload: function() {  // 页面卸载触发 },
        onPullDownRefresh: function() {  // 页面下拉刷新触发},
        onReachBottom: function() { // 页面上滑触底触发 },
        onShareAppMessage: function () { 
            // 页面点击转发触发,需要return一个object,只有定义了此方法,才会有转发的功能 
            return {
                title: "分享的页面", // 分享页面的标题
                path: "/pages/logs/logs" // 分享的页面的路径
            }
        },
        onPageScroll: function(options) { // 页面滚动触发 },
        myFn: function() { // 自定义函数
            console.log(this.route); // 获取当前页面的路径
            this.setData({ // 修改状态
                msg: "haha"
            }, function() {
                // 状态修改完,调用此方法
            })
            console.log(getCurrentPages()); // 获取当前页面栈实例
        }
        customData: { // 自定义属性 }
    })
  4. 页面路由

    方法wx.navigateTo(object) 跳转到指定的页面,无法跳转到tabbar页面(当前页保留)
        wx.navigateTo({ 
            url: ‘/pages/logs/logs?id=1‘, // 页面路劲,可以传递query参数
            success: function() { // 导航成功执行
                console.log("跳转成功");
            },
            fail: function() { // 导航失败执行
                console.log("跳转失败");
            },
            complete: function() { // 导航完成调用
                console.log("导航结束");
            }
        })
    方法wx.navigateBack(object) 返回到之前的页面
        wx.navigateBack({
            delta: 2 // 后退2步
        }) 
    方法wx.redirectTo(object) 销毁当前页面,跳转到指定的页面,不能跳转到tabbar页面
        使用方法和navigateTo一样
    方法wx.reLaunch(object) 销毁所有页面,跳转到任意指定的页面
        使用方法和navigateTo一样
    方法wx.switchTab(object) 跳转到tabbar页面
        使用方法和navigateTo一样
  5. 模块化

    js文件可以使用exports和module.exports暴露接口
        exports是module.exports的一个引用
        function fn () {
            console.log("导入的方法执行了");
        }
        exports.fn = fn;
    使用文件中的方法
        var common  = require(‘../common.js‘);
        common.fn();
  6. WXML文件细节

    状态绑定

    变量使用双大括号包裹 <view>{{msg}}</view>
    标签的属性使用双引号包裹 <view id="item"></view>
    双引号里面的内容wx都会将其转化成字符串,所以true,false要表达本意需要再包裹双大括号
    绑定对象,不需要对象的花括号 <template is="mytemplate" data="{{ a: 1, b: 2 }}"></template>

    列表遍历

    <view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">
        {{index}}: {{item}}
    </view>
    给index和item取别名
        <view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">
            {{myIndex}}: {{myItem}}
        </view>
    渲染多节点代码块
        <block wx:for="{{[1, 2, 3]}}">
            <view> {{index}}: </view>
            <view> {{item}} </view>
        </block>
    遍历字符串
        <view wx:for="array">
            {{item}}
        </view>
    绑定key,当组件重排后根据id可以复用组件和组件的状态
        <block wx:for="{{[1, 2, 3]}}" wx:key="*this"> // 当item是字符串或者数字可以使用*this代表item作为key
            <view> {{index}}: </view>
            <view> {{item}} </view>
        </block>

    条件渲染

    <view wx:if="{{false}}">haha</view>
    <view wx:elif="{{true}}">haha1</view>
    <view wx:else="{{false}}">haha2</view>
    同样也可以使用block来控制多节点代码块

    模板

    声明一个模板
        <template name="mytemplate">
            <view>
                {{a}}: {{b}}
            </view>
        </template>
    使用此模板 obj: { a: 1, b: 2 }
        <template is="mytemplate" data="{{...obj}}"></template>

    事件

    使用bindtap绑定事件 <view bindtap="fn" data-my-data="222"></view>
    事件对象
        myFn: function(event) {
            console.log(event);
            // 使用data开头的自定义属性,将保存再event.currentTarget.dataset中
        }
    事件分类
        冒泡事件
            touchstart 开始触摸
            touchmove 触摸移动
            touchcancel 触摸打断
            touchend 触摸离开
            tap 瞬间触摸
            longpress 超过350ms的触摸
            transitionend 过渡结束
            animationstart 动画开始
            animationiteration 动画执行一遍后触发
            animationend 动画结束触发
        非冒泡事件,除了上述事件以外都是非冒泡事件
    绑定事件
        可以使用bind和catch绑定
            bindtap或者bind:tap 不阻止冒泡 
            catchtap或者catch:tap 阻止冒泡

    在WXML文件中导入其他WXML文件

    可以将上面讲的template代码,放到一个单独的wxml文件中,然后在当前文件中使用 <import src="../common.wxml" /> 导入,就可以立即使用了
    而<include src="../common.wxml" />的作用,是将除了template和wxs以外的代码,都拷贝到include所在的位置
  7. wxs的使用(代码可以单独写在wxs文件中,也可以写在wxs标签中)

    模块

    wxs的作用其实和js文件的作用是一样的,只不过提供了另外一种方式来写js
    外界要访问wxs中定义的代码需要使用module.exports导出
        创建一个wxs文件,定义如下代码
            var message = "你好吗?";
            module.exports.message = message;
        在wxml文件中使用
            首先使用wxs标签导入 <wxs src="../common.wxs" module="wxsData"/>
            使用 <view class="demo">{{wxsData.message}}</view>
        在其他wxs文件中使用   
            var wxsData = require("../common.wxs");
  8. WXSS文件

    尺寸单位使用rpx,一个rpx就代表一个物理像素
    导入其他WXSS文件 @import "../common.wxss";
  9. 自定义组件(和vue里面的组件类似)

    创建自定义组件的步骤

    第一步,修改json
        修改json文件为 { "component": true }
    第二部,WXML文件书写
        <view class="demo"> {{text}} </view>
        <slot></slot>
        slot就是插槽,和vue的一样
    第三步,WXSS中书写
        .demo{ color: red; }
        只能使用类选择器
    第四部,js文件中写
        Component({
            properties: {
                // 组件的属性,可以指定类型和默认值,和vue的props验证很像
                text: {
                    type: String,
                    value: ‘默认值‘,
                }
            },
            data: {
                // 组件的状态
                someData: {}
            },
            methods: {
                // 组件的自定义方法
                customMethod: function () { }
            }
        })
    第五步,使用组件
        在要使用此自定义组件的page中,修改他的json,插入如下字段
            "usingComponents": {
                "my-component": "../myComponent/myComponent"
            }
        在page组件中使用 <my-component></my-component> 即可
        同时可以使用 <my-component text="我是传递的属性"></my-component> 传递属性值给组件内部

    WXML文件的细节

    写法和一般的WXML文件写法一致,不过多了slot
    没有名字的slot只能有一个,如果要使用多个slot,需要操作如下几步
    第一步,在js中的Component函数中,添加如下
        options: {
            multipleSlots: true
        },
    第二步,在WXML中写多个带名字的slot
        <view class="demo"> {{text}} </view>
        <slot name="a"></slot>
        <slot name="b"></slot>
    第三步,在页面中使用
        <my-component text="我是传递的属性">
            <view slot="a">我是a</view>
            <view slot="b">我是b</view>
        </my-component>

    WXSS文件的细节

    只能使用类选择器
    可以继承组件外的样式
    app.wxss文件中定义的样式,对组件无效
    另外可以使用:host来定义组件标签的样式
        :host{ color: black; }

    js文件的细节

    Component函数的使用如下
    Component({
        properties: { // 设置组件接受的属性
            myProperty1: { // 属性名
                type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
                value: ‘‘, // 属性初始值(可选),如果未指定则会根据类型选择一个
                observer: function(newVal, oldVal){ // 监听属性值改变的函数 } 
            },
            myProperty2: String // 简化的定义方式
        },
        data: {}, // 组件状态
        methods: { // 设置方法
            onMyButtonTap: function(){
                console.log(this.id); // 组件标签的id
                console.log(this.dataset); // 组件的data自定义属性集合
                console.log(this.data); // 组件的属性和状态的集合
                console.log(this.hasBehavior()) // 组件是否有behavior属性
                this.setData({}) // 属性和状态都可以设置 
                /*
                    可以手动触发组件的自定义事件,比如,组件上绑定了一个自定义事件
                    <my-component bindmyEvent="myFn"></my-component>
                    要手动触发myEvent,需要调用 
                        this.triggerEvent(‘myEvent‘, { 
                            // 事件参数 
                            }, { 
                                bubbles: true, // 是否冒泡
                                composed: true, // 到父组件内部寻找同名事件
                                capturePhase: true // 是否捕获
                            }
                        );
                */
            }
        },
        created: function(){}, // 组件在内存中创建完毕执行
        attached: function(){}, // 组件挂载之前执行
        ready: function() {}, // 组件挂载后执行
        detached: function(){}, // 组件移除执行
        moved: function(){}, // 组件移动的时候执行
        relations: {
            /*
                嵌套的组件需要相互关联就要使用此字段
                相同嵌套子节点的处理方式
                    假设嵌套的html结构如下
                        <custom-ul>
                            <custom-li> item 1 </custom-li>
                            <custom-li> item 2 </custom-li>
                        </custom-ul>
                    则custom-li组件中需要定义如下的relations
                    ‘./custom-ul‘: { // 嵌套父组件的路径
                        type: ‘parent‘, // 关联的目标节点应为父节点
                        linked: function(target) { }, // custom-li插入到custom-ul时执行,target是custom-ul
                        linkChanged: function(target) { }, // custom-li被移动后执行,target是custom-ul
                        unlinked: function(target) {  } // custom-li被移除时执行,target是custom-ul
                    }
                    在custom-ul组件中也要定义此字段,只不过反过来 type 改成 child
                不同嵌套子节点的处理方式
                    <custom-div>
                        <custom-span> item 1 </custom-span>
                        <custom-div> item 2 </custom-div>
                    </custom-div>
                    此时就要使用behavior作为公共的节点路径了,假设custom-span和custom-div都有一个名为customFormControls的behavior
                    custom-span和custom-div内部定义relations的方式和之前一样,只不过将type改成ancestor
                    custom-div中定义
                        ‘customFormControls‘: {
                            type: ‘descendant‘, // 关联的目标节点应为子孙节点
                            target: customFormControls
                        }
            */
        }, 
        behaviors: [
            /*
                behaviors的作用就是用来创建一个公用的组件js,内部代码和Component一模一样
                Behavior({ //... })
                主要用来和当前的Component代码合并,同名的属性以当前组件的为主
            */
        ]
    })
  10. 按需加载

    实现按需加载的步骤如下
    主包中应只包含tabbar
    第一步,在项目根目录下创建分包的文件夹,将分包的page写在里面
    第二步,在app.json中添加如下配置
        "subPackages": [
            {
                "root": "package1", // 分包文件夹根路径
                "pages": [ // 分包中包含的路径,不能添加到app.json的page中
                    "pages/Demo/Demo"
                ]
            }
        ]
        在tabbar配置项中,不能应用分包的页面
    第三步,使用分包文件
        在tabbar的页面中,引用分包页
        wx.navigateTo({
            url: ‘../../package1/pages/Demo/Demo‘
        })

微信小程序基础语法总结

标签:glob   onload   进入   number   首页   network   control   0ms   应用   

原文地址:https://www.cnblogs.com/ye-hcj/p/8243066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!