微信小程序开发小记

开发前准备

1. 首先在微信小程序平台上申请一个 https://mp.weixin.qq.com/ 点击立即注册，在打开的页面中选择小程序后，填入相关的信息，就可以完成注册了
2. 在信息页面获取AppId

   

3. 安装开发者工具，链接https://mp.weixin.qq.com/debu... 根据自己的操作系统下载对应的安装包进行安装
4. 下载完毕后添加你的小程序，输入AppId
5. 添加页面：在app.json中新增路径，会自动在根目录的pages文件夹下新增页面文件夹，四件套，换汤不换药的html+js+css+json配置

   

WXML模板

1、要求严格闭合
2、大小写敏感

1. 双括号

   双括号{{}}，类似于vue的{{}}用法，可以进行一些简单的逻辑运算，数据绑定于对应js文件的data中

      <!--属性值的绑定,必须使用双括号-->
   <text data-test="{{test}}"> hello world</text>
   

2. 条件逻辑

      <view wx:if="{{length > 5}}"> 1 </view>
      <view wx:elif="{{length > 2}}"> 2 </view>
      <view wx:else> 3 </view>
      <!--因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装        起来，并在上边使用 wx:if 控制属性-->
      <block wx:if="{{true}}">
        <view> view1 </view>
        <view> view2 </view>
      </block>
   

3. 列表渲染

   在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

    <!-- array 是一个数组 -->
      <view wx:for="{{array}}">
        {{index}}: {{item.message}}
      </view>
      <!-- 对应的脚本文件
      Page({
        data: {
          array: [{
            message: 'foo',
          }, {
            message: 'bar'
          }]
        }
      })
      -->
      <!--使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：-->
      <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
        {{idx}}: {{itemName.message}}
      </view>
     <!-- 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，使用 wx:key 来指定列表中项目的唯一的标识符。
      字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
      保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字-->
      <!--wx:key 的值以两种形式提供：-->
      <switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
      <switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
   

4. 模板
   WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段

   <!--
      item: {
        index: 0,
        msg: 'this is a template',
        time: '2016-06-18'
      }-->
      <template name="msgItem">
        <view>
          <text> {{index}}: {{msg}} </text>
          <text> Time: {{time}} </text>
        </view>
      </template>
      <template is="msgItem" data="{{...item}}"/>
   

5. 引用
   WXML 提供两种文件引用方式import和include。
   import 可以在该文件中使用目标文件定义的 template

      <!--在 item.wxml 中定义了一个叫 item的 template，在 index.wxml 中引用了 item.wxml，就可以使用 item模板-->
      <import src="item.wxml"/>
      <template is="item" data="{{text: 'forbar'}}"/>

   需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性

      <!--include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置-->
      <!-- index.wxml -->
      <include src="header.wxml"/>
      <view> body </view>
      <include src="footer.wxml"/>
   

6. 共同属性
   所有wxml 标签都支持的属性称之为共同属性

   

WXSS样式

WXSS与Web开发中的CSS类似

分别为页面样式、其他样式、公用样式
公用样式：会被注入到小程序的每个页面
页面样式：与app.json注册过的页面同名且位置同级的WXSS文件
其它样式：其它样式可以被项目公共样式和页面样式引用

1. 尺寸
   在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕

2. WXSS引用

      <!--小程序中的样式引用-->
    @import './test_0.wxss'
   

3. 内联样式
   WXSS内联样式与Web开发一致
   小程序支持动态更新内联样式：

   <!--可动态变化的内联样式-->
   <!--
   {
    eleColor: 'red',
    eleFontsize: '48rpx'
   }-->
   <view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>
   

4. 选择器
   感觉跟原生css没有太大差别

   

   

5. 模块化
   在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

   // moduleA.js
   module.exports = function( value ){
    return value * 2;
   }
   // 在B.js中引用模块A
   var multiplyBy2 = require('./moduleA')
   var result = multiplyBy2(4)

6. 作用域
   当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值

      // a.js
      // 获取全局变量
      var global = getApp()
      global.globalValue = 'globalValue'
      // b.js
      // 访问全局变量
      var global = getApp()
      console.log(global.globalValue) // 输出 globalValue
   

7. 盒式布局
   具体可以看官方文档，和常用的flex布局类似
   https://developers.weixin.qq....

常用交互

1. 云函数

   模拟后端的函数操作，在每个新建的云函数中，先npm install一下wx-server-sdk（每个都要），然后上传你的云函数，就可以在云平台看到相关函数，进行测试等等
   

云函数的调用：

wx.cloud.callFunction({
      name: 'resp',
      data: {
        data: '测试数据'
      },
      success: res => {
        wx.showToast({
          title: '发布成功',
        })
        this.setData({
          name: JSON.stringify(res.result.data.total)
        })
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '调用失败',
        })
        console.error('[云函数] [sum] 调用失败：', err)
      }
    })

云函数中操作数据库（官方文档写的很迷），这边总结一下：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  // const wxContext = cloud.getWXContext()
  const add = await db.collection('counters').add({
    data: {
      count: 1,
      data: event.data
    }
  })
  const count = await db.collection('counters').count()
  return {
    data: count
  }
}

关于Loading的问题
一些点击之后上传数据的交互，比如Button的loading方法，在微信小程序中只是添加一个按钮样式？？？为了防止用户极快速度触发两次tap回调，可以一个hasClick的“锁”，在开始请求前检查是否已经发起过请求，如果没有才发起这次请求，等到请求返回之后再把锁的状态恢复回去

var hasClick = false
if (hasClick) {
      return
    }
hasClick = true
wx.showLoading()
//在返回完成记得恢复状态
complete: data => {
        hasClick = false
      }

后续踩坑

1. 小程序在线音频

这边的在线地址需要真正的url地址而不是复制的链接地址哈，在播放歌曲时找到真正的资源地址