小程序开发笔记

小程序开发，比较好玩的地方，引入外部依赖，云数据库及云函数的调试及微信开发者工具使用
(小程序语法什么的就不多说了)

项目基本目录结构

同名的js、样式、配置等会自动引入。
每个页面可以有独立的json（配置文件），会覆盖全局的配置。
文件夹名字都可自定义，但是要同步到工程配置上。

{
  // 路由 及 组件路径
  // 第一条 是 首页
  "pages": [
    "pages/index/index"
  ],
  // 一些小程序原生组件的配置
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "专属小程序",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

比较好玩的地方

数据绑定

小程序也是MVVM的开发方式，渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态，然后再通过一种模板语法来描述状态和界面结构的关系
当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过this.setData({key:value})来将表单上的值赋值给data中的对应值。
模板有点像vue，但是只绑定data下的变量，值的变化又像react

<input bindinput="onInput" class='reason' value='{{str}}' />

Page({
  data: {
    str:''
  },
  onInput(e) {
    this.setData({
      str: e.detail.value
    })
  }
})

列表渲染

Page({
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

<text wx:for="{{items}}">{{item}}</text>

// 使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名：
<view wx:for="{{List}}" wx:for-item="value" wx:for-index="index" wx:key="value._id">

事件处理

// 小程序中，全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件,例如
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡

// react
func(arg) {
  return (e) {
  };
}

<button onClick="this.func(arg)">明天不上班</button>


// 而小程序不能像react或vue一样如此传参调用
// 小程序得用mark等功能将值存在event中 在func中获取

func(e) {
  const id = e.mark.id;
  let dataList = this.data.dataList.filter(({ _id }) => _id !== id)
}

<view mark:id="123123" bind:tap="func"></view>

引入外部依赖

项目详情里开启 使用npm模块

// 在miniprogram文件夹下 npm init
npm init
npm install moment // 随便装一个

工具 -> 构建npm

结果

可以看到生成了个miniprogram_npm文件夹
然后就可以愉快的import了

云数据库

点击云开发按钮，会弹出云开发的界面，里边有云数据库，文件存储，和云函数

1. 前端可以连接数据库，直接进行数据操作

   // app.js下 init wx.cloud
   wx.cloud.init({})
   
   // 使用时
   const db = wx.cloud.database()
   db.collection('counters').get({
     success: res => {}
   })

2. 云数据库权限设置
   

   • 如果开启了仅创建者可读写，那么前端连接数据库创建数据时，会默认加入创建者的_openid，并且在query数据的时候也会默认加上 where({ _openid })的筛选项
     
   • 但是通过云函数（后端）来连接数据库创建或query数据的话就会跳过这些权限

云函数（serverless）

云函数是指运行在云端的代码，也就是你cloudfunctionRoot文件夹里面的代码

在cloudfunctionRoot创建一个云函数

如

会生成index.js及及package.json

• index.js里就是具体的逻辑业务，需要export出去一个main function，function里要return出result

exports.main = () => {}

• 而package.json里就是我们的npm的package.json，里边记录需要引入的dependencies，默认会引入wx-server-sdk即微信服务端API，可以调用官方api。

虽然一个云函数只有一个main，但是可以这样

exports.main = async (event, context) => {
  const { action } = event // event是接受的数据

  // 根据参数来决定调用哪个function
  switch(action) {
    case 'add': return await add(event); break;
    case 'remove': return await remove(event); break;
    case 'update': return await update(event); break;
    case 'query': return await query(event); break;
  }
  const result = await db.collection('counters').get()
  return result.data
}

本地调试写好的云函数

1. 确定外部依赖之后需要 在云函数所在文件夹 npm install一下 以便后边的本地调试
2. 右键cloudfunctionRoot 本地调试 会弹出本地调试界面
   
3. 选中要测试的云函数之后，选择右边的开启本地调试 init好之后 编辑json数据调用就好了
   
4. 本地调试没问题之后，要上传至云端，创建并部署，不上传node_modules
   
5. 就可以在云函数面板下看到你刚上传的云函数了
   
6. 目前少量调用时不收费的，不知道以后

前端调用方法

// app.js下 init wx.cloud
wx.cloud.init({})

// 调用时
wx.cloud.callFunction({
  name: name,
  data: data,
  success: res => {},
  fail: err => {},
  complete() {}
})

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦