微信小程序基础语法

微信小程序：

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

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

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

微信小程序的开发跟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