微信小程序基础语法

微信小程序：

咱们在手机微信里使用的小程序就是微信小程序

想要开发微信小程序须要先在微信公众平台去注册帐号而后再下载微信开发工具

下载完成以后咱们选择新建一个项目，创建完成以后咱们就进入到了开发小程序的界面

微信小程序的开发跟vue很像都是使用数据驱动

咱们选择将pages下的文件夹下的全部文件删除这样我么就能够全新的开发咱们的小程序了，咱们点击右键选择新建目录而后（这个操做就至关于新建了一个文件夹）而后右键点击你新建的目录选择新建page会自动帮咱们匹配出四个文件分别是:

• .js文件

  这个文件里有不少东西先只说（后续会更新）data,这个里边的data就跟vue中的data同样都是再data里边写数据的。

• .wxml文件

  这个就至关因而用来写html内容的只不过开发小程序用小程序提供给咱们的标签标签大体介绍有如下几种:

  • view标签就至关于html中div标签
  • text标签就至关于html中span标签
  • view标签就至关于html中img标签
  • navgation标签就至关于html中a标签
• .json文件

• 这个是用来写css样式的

上边说太小程序也是数据驱动的因此小程序的插值也是用{{同一文件夹下的js文件中的数据}}表示的

-pages/demo/demo.wxml-->
 view标签就至关于html中div标签 -->
  text标签至关于html中的span标签 -->
  navigat or至关于html中的a标签-->
 image标签至关于html中的img标签 -->
  progess标签是进度条标签写上一个进度条标签会出现一个进度条 -->

  1.小程序插值语法：{{js文件中的data里的数据}}
  在小程序中{{js中的data里的数据}}就表明动态值

  2.元素显示隐藏  在vue中使用v-show="data中的数据"
    在小程序中使用标签的属性hidden="{{对应js文件中data的数据}}"
    若是hidden的值为true在将元素隐藏为false则将元素显示

  3.条件渲染  vue中是v-if  v-else v-elseif
     在小程序中是 wx:if="{{对应js文件中data的数据}}"
                 wx:else="{{对应js文件中data的数据}}"
                wx:elif="{{对应js文件中data的数据}}"
   
   4.循环  在vue中使用v-for="(数组的每一项,数组中每一项的下标) in data里的数据"
     在小程序里使用 wx:for="{{要循环的data中的数据}}" wx:for-item="数组中的每一项" wx:for-index="数组中每一项的下标" 


   5.click事件  在vue中咱们使用@click=”对应js中methods里的函数“
                在小程序中使用bindtap="js文件里的函数名"
                这个函数就直接写在js文件里
  6.经过函数去改变data中的数据：
  由于小程序是单向数据流因此咱们须要使用特定的方法才能修改他里的数据
  咱们在函数里可使用this.data能够获取到data里的数据,在函数里调用this.setData({})函数能够修改data里的数据  例:  this.setData({
  你要修改数据的数据名:值
  }）
  7.事件绑定
     在标签上写 bind事件类型="事件函数",这里的事件类型跟平时使用的事件类型不太一致须要使用移动端的事件类型。事件函数直接写在该页面的对应的js文件里。事件函数只有一个参数就是事件对象 （我习惯这个参数叫作e）
     若是想要触发事件时传递参数就在标签上写 data-参数名="{{要传递的参数}}" 而后在事件函数里经过e.target.参数名来获取参数。
  8.url传参
  小程序中url传参只接受query参数，例:url?id=1 咱们想要获取到id的值就在该页面对应的js文件里的onload函数里的option参数就是咱们所传递的的参数
复制代码

小程序的请求:

使用小程序请求数据有小程序专门提供给咱们的方法,若是咱们想要在哪一个页面上上使用请求数据来渲染页面，咱们就在该页面的同一文件夹下的js文件里的监听页面加载onload函数里去调用wx.request()函数，咱们只需输入request按下回车时微信开发者工具会自动给咱们写出代码，而后再url里写地址。这个小程序的请求基本上就跟jquery的ajax同样。

注：当咱们去使用微信开发者工具去建立项目开发小程序时跟pages文件夹同级的文件必定不要删除。

若是需求更多更复杂上面的基础语法知足不了需求可查看官方文档

小程序的组件：

在小程序中也是支持组件的咱们须要先建立一个文件夹而后右键点击该文件夹选择新建component一样也是会帮咱们创造出四个文件分别是：

• .wxml文件

  在这个文件里写组件模板

• .wxss文件

  在这个文件里写css样式

• .js

  在这个文件里写组件相关的js操做

• .json文件

  json文件里有两个属性：

  • component

    这个属性的属性值为true则表示这是一个组件

  • usingComponents

    这个属性的属性值是一个对象对象里的咱们能够在这个组件里注册当前组件的子组件

    例：

    "usingComponents":{
     
        "组件名":"组件的路径" 
     }
    复制代码

  若是咱们想在某个页面中显示某个组件则找到该页面对应的json文件注册组件在该json文件里的对象里这样写：

  "usingComponents":{
   
      "组件名":"组件的路径" 
   }
  复制代码

  而后咱们在该页面中写上组件标签便可<组件名>< /组件名>

  小程序的组件通讯：

  要想实现小程序的组件通讯咱们要先搞清组件与组件的关系以及组件与页面的关系。若是a组件的组件模板内有b组件的组件标签且a组件的json文件里也注册了该组件咱们成a组件是b组件的“父亲”。若是某个页面的json文件里注册了某组件且某个页面上有该组件的组件标签咱们称该页面为该组件的“父亲”。

  父子通讯：

  咱们先在页面或者组件中找到子组件标签，而后再子组件标签上写自定义属性属性值为要传递的数据。

  例: <组件标签 自定义属性="{{要传递的数据}}">

  而后在子组件的文件夹下找到js文件下的properties对象 在该对象里写属性，属性名为刚刚在页面上的子组件标签上的自定义属性，属性值为传递过来数据的类型而后咱们像使用data中的数据同样使用便可

  例: "properties":{

  刚在页面上子组件标签的自定义属性名:传递过来的数据类型
    }
  复制代码

  子父通讯：

  先在页面或者组件中找到子组件标签而后给子组件标签绑定自定义事件

  例:

  <组件标签 bind自定义事件名="事件函数"></组件标签>
  复制代码

  而后再该页面或者组件写自定义事件（若是是页面则直接写在js文件里，若是是组件则直接写在js文件里的methods中）

  例：

  在页面中:
          事件函数（e）{
              //e.datil就是子组件给咱们传递过来的数据
          }
   在页面中:
          methods:{
              事件函数(e){
                    //e.datil就是子组件给咱们传递过来的数据
              }
          }
  复制代码

  而后再子组件模板中选择一个标签绑定原生事件而后在该组件对应的js文件的methods里写该原生事件函数在原生事件的事件函数里调用this.triggerEvent函数:

  例:

  methods:{
        事件函数（）{
            
            this.triggerEvent("刚刚在页面或者组件的子组件标签上写的自定义事件名注意不要带bind",要传递的数据)
        }
    }
  复制代码

  ---

  页面以及组件的布局，rex，上拉加载下拉刷新：

  页面以及组件的样式是写在.wxss文件里的

  1. 布局单位rpx：

     咱们在pc端布局使用px作为单位，移动端使用rpm作为单位的，然而咱们使用的bootstarp和element-ui等ui框架都是使用的rpx做为单位的，咱们进行小程序开发时也是使用rpx做为单位的。

     什么是rpx？

     咱们在移动端布局时是须要先引入相应的js文件而后去使用rem单位进行响应式布局的做用就是在不一样尺寸的屏幕上显示不一样的尺寸。而rpx是微信推出的一种新单位根据官方定义也是进行响应式布局的，用法就是咱们在写小程序的组件或者页面的样式时使用rpx单位。

     切记：咱们在使用rpx单位时咱们的设计图量出来的是多少px就使用多少rpx。若是咱们再写小程序的组件和页面的样式时使用px单位的话若是设计图量出来的是 n px，那么我么就是n/2px。可是咱们使用px时是不会有响应式的。

  2. 上拉加载：

     关于上拉加载不过是想要在当前渲染的页面中加入新的数据，咱们想页面哪一个页面上实现下拉加载更多数据，那么咱们就在该页面的js文件中找到 onReachBottom: function() {} 函数这个函数就是用啦监听用户的上拉事件而后再这个事件中去进行添加数据。

  3. 下拉刷新：

     咱们要实现下拉刷新，首先要看咱们是要实如今单个页面中又下拉刷新的事件仍是在每一个页面中都有下拉刷新事件，若是是每一个页面则找到app.json写以下代码，或者单个页面的对应的json文件写以下代码：

     例:

     "enablePullDownRefresh": true,   //若是是单个页面则直接写，若是是每一个页面则写在app.json文件的window里
     复制代码

     写上那样的代码只不过是页面有了下拉刷新事件，若是咱们想在某个页面里边去使用下拉刷新那么就去找到该页面对应js里的onPullDownRefresh: function () {} 函数，这个函数是监听用户下拉的事件，若是咱们想在用户下拉刷新时作一些操做那么则在这个函数里写。

  小程序用户向服务器上传图片:

  想要实现向服务器上传图片那么咱们须要选择一个标签绑定原生事件，而后经过原生事件去调用wx.chooseImage这个函数，函数里的success的参数res.tempFilepaths里就是咱们在本地选择到的图片的路径

  例:

  事件函数（）{
       wx.chooseImage({
           success:(res)=>{
                res.tempFilepaths  //是一个数组它里边包含了咱们在本地所选择到的图片
           }
       })
   }
  复制代码

  上述操做完成以后并无真正的上传至服务器须要写成下边的代码才能真正的进行上传"

  例:

  事件函数（）{
       wx.chooseImage({
           success:(res)=>{
                res.tempFilepaths  
                //下边这几行代码是上传文件的代码
                const 变量名=wx.uploadFile({
                    "url":"服务器的地址"，
                    "filepath":要上传的文件,
                    "name":"接口文档支持的参数"
                })  //这一段为上传文件的代码
           }
       })
   }
  复制代码

  这段代码只不过是直接选择到了图片而后直接上传了，咱们也能够把上传的代码拿出来绑定在另外一个事件函数里。若是咱们要监听上传的进度则使用

  例 ：

  刚刚上传文件时的变量名.onProgressUpdate((res)=>{
            res.progress   //上传进度
            res.totalBytesSent //已经上传的数据长度
            res.totalBytesExpectedToSend //预期须要上传的总长度
     })
  复制代码

  vant:

  在上边提太小程序也是有组件的vant就是咱们在小程序中使用的组件库。跟bootstarp以及elemen-ui的基本一致。

  vant在vue中也是可使用，在vue中使用须要先经过cnpm下载使用，使用方法请参考官方文档

  还有就是咱们能够把咱们经常使用的vs Code与微信开发工具结合起来使用。编码时在vscode进行编码，查看效果和席间目录以及组件时在微信开发工具中建立。若是要在vscode中进行编码建议在vscode中下载minapp插件。

  下面咱们写的是在小程序中使用vant

  咱们在小程序中使用vant一样须要经过npm去下载不过在微信开发工具中使用npm是这样使用的：如今微信开发工具中找到左上角的设置->项目设置->将使用npm模块勾选上->再找到左上角的工具->构建npm。若是显示没有没有找到能够构建的npm模块，那么咱们则再小程序的文件夹的根目录下打开命令行输入如下命令：

  例：

  npm i vant-weapp -S --production   //下载vant
   npm init   //输入后一路回车
   npm i miniprogram-sm-crypto --production
   输入完这两行命令后再去微信开发工具里去构建npm
  复制代码