小程序语法介绍★

弄小程序第一步

1.先申请https

    在博客上有

2.登陆自己的微信公共平台,点击小程序,然后照流程申请一个个人小程序

3.下载一个微信开发者工具,打开微信开发者工具,点击小程序.(地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714)

4.要输入项目目录:自己找个文件夹就行.AppID:网页登陆微信小程序,左边点设置,头部点开发设置就能看到AppID.项目名称可改可不改,(勾不用去掉)点击确认微信就会帮我们创建好模板

5.讲解一下框架结构,一个微信页面由.wxml和.wxss和.js的3个文件组成

    1.app.js是小程序的主逻辑文件,主要用来注册小程序

    2.app.json是小程序的主配置文件,对小程序进行全局配置,小程序启动时先找app.json

    3.app.wxss是小程序的主样式,这个页面设置后其他页面可共享

    4.pages文件夹里放的是页面,一个文件夹代表一个页面,一个文件夹都有4个文件

    5.utils文件夹是放公共代码的地方

    6.放音频视频等目录可以在主目录下自己创建(但是一般放在服务器)

6.项目内搜索: shift + ctrl + F

7.讲解app.json主配置文件,小程序启动时先找app.json(图一,图二,图三,图四)

    {

        "pages":[

         "pages/index/index",        //小程序一进来会先到第一行的页面

         "pages/logs/logs",

         //每新增页面都要在这里定义,直接在这里加上后会自动建4个页面

        ],

        "window":{

            "navigationBarBackgroundColor": "#31c27c",  //导航条北京颜色(常用)

         "navigationBarTitleText": "QQ",             //导航条文字(常用)

         "navigationBarTextStyle":"white"            //导航条文字样式

         "enablePullDownRefresh":true,               //是否开启下拉刷新

            "backgroundColr":'#000',                    //下拉窗口的背景色

         "backgroundTextStyle":"dark",               //背景文字颜色

         "onReachBottomDistance":"50",               //页面上拉触底事件触发时距页面底部距离,单位为px

        },

        "tabBar": {

         "color":"#000", //tab上的文字默认颜色

         "selectedColor":"#E22018", //tab上的文字选中时的颜色

         "backgroundColor":"#1195EE", //tab的背景色

         "position":"top",           //图片不会显示

         "list": [

         {"pagePath":"pages/index/index"},                 //必跳转页面路径,需在pages中先定义

         {"text":"文字"},                            //必,tab上按钮文字

         {"iconPath":"路径"}, //图片路径,建议为81px*81px,positon为top时无效

         {"selectedIconPath":"路径"} //选中时的图片路径,建议为81px*81px,positon为top时无效

         ]

        },

        "networkTimeout":{

            //在微信小程序中有多种网络连接API,例如request连接,socket网络连接,上传文件,下载文件等网络操作的API.在主配置文件app.json中可通过参数networkTimeout设置各种网络请求的超时时间.

        },

        "debug":false,

    }

8.说单页里的配置文件pages/index/index.json

    1.页面配置文件中只能设置app.join中的window配置项,配置后悔覆盖app.json中的window,配置时,无需写window这个键,只需外面写花括号

    2.写法

    {

        "backgroundColr":'#000',

     "backgroundTextStyle":"dark",

     "navigationBarBackgroundColor": "#31c27c",

    }

9.说app.js主逻辑文件

    1.最外层要用App{}函数注册

    2.可定义3个生命周期函数

        1.onLaunch:当小程序初始化完成时会触发,全局只触发一次.

        2.onShow:当小程序启动,或从后台进入前台显示会触发.

        3.onHide:当小程序从前台进入后台会触发.(从看不到到看到小程序表示进入前台,后台指点击左上角X,或者点击home)

10.说单页里的index.js文件

    1.最外层要用Page()函数注册

    2.也可定义页面的生命周期函数

    3.写法:(大部分和vue一样)

        Page({

            data:{

                motto: 'hello world',

            }

            //直接诶时候

            bindViewTap: function(){

                wx.navigateTo({

                    url: '../logs/logs'

                })

            },

            onLoad: function(){

 

            }

        })

11.说单页里的index.wxml文件

    1.block相当于大div,只接受控制属性wx:if,wx:for等,为true也不会在页面中渲染

    1.view标签相当于div

    2.text标签相当于p

    3.隐藏标签方法一不用v-if,用hidden:为false显示,为true隐藏,隐藏仍有渲染

        例子:<view hidden="{ {变量?true:false}}"></view>

    4.隐藏标签方法二不用v-if,用wx:if:正常,隐藏不渲染

        例子:

            <view wx:if="{ {变量}}"></view>

            <view wx:elif="{ {num>12}}"></view>

            <view wx:elif="{ {num<12}}"></view>

            <view wx:else></view>

    5.列表写法:不用v-for,用wx:for

        例子:

            <view wx:for="{ {test}}" wx:for-index="i" wx:for-item="v">

             { {index}}:{ {item.message}}     //item相当于v

             { {i}}:{ {v.message}}            //用了wx:for-index="i" wx:for-item="v"自定义后就能这样用

            </view>

    6.列表嵌套写法:不用v-for,用wx:for和wx:for-item来区别

        例子:

            <view wx:for="{ {test}}" wx:for-index="i" wx:for-item="v">

                <view wx:for="{ {test}}" wx:for-index="ii" wx:for-item="vv">

                </view>

            </view>

   7.组件的调用:

       例子:

           //在index.wxml中定义模板

           <template name="root">

               <view>

                   { {item:name}}----{ {item:age}}

               </view>

           <template>

 

           //在loags.wxml文件中调用

           <import src="../index/index.wxml"/>     //import导入template里面的代码,不包括index.wxml的import

           <include src="../index/index.wxml">     //include导入template以外的代码,包括index.wxml的import

           <view wx:for="user">

               <template is='root' data="{ {item}}"></template>     //也可以写在最外层

           </view>

 

12.app.wxss是全局样式,在所有页面都有效,单页有写会覆盖app.wxss

 

13.说单页里的index.wxss文件

    1.px,cm,rem,rpx这些单位都能使用

    2.用rpx比较多,页面总宽度为750rpx

    3.用rem的话页面中宽度为20rem

    4.样式导入

        在test.wxss中导入index.wxss

        @import "../index/index.wxss"

 

14.说页面里的事件

    1.在微信小程序中,事件分为两类:

        冒泡事件和非冒泡事件

    2.冒泡事件有:

        touchstart:     //手指触摸

        touchend:       //手指触摸动作结束

        touchemove:     //手指触摸够移动

        touchcancel:    //手指触摸动作被打断,如来电

        tap:            //手指触摸后离开

        longtap:        //手指触摸超过350ms再离开

        //还有很多,要在官方文档查

        例子:

            //index.wxml

            <view bingtouchstart="test">点击</view>

 

            //index.js

            Page({

                data:{

                    name:"张三"

                },

                test: function(){

    &