微信小程序

微信小程序基础

微信小程序开发包括框架，组件，API，云开发

Posted by page on December 25, 2020

小程序基础

小程序技术

WeixinJSBridge

JS-SDK

逻辑层（JSCore）+渲染层（WebView）

开发准备

申请账号 https://mp.weixin.qq.com/ ：AppID（小程序ID）

安装开发者工具

小程序开发指南

源代码文件

.json 配置文件：app.json、page.json、project.config.json

.wxml模板文件

.wxss  样式文件：app.wxss、page.wxss

.js  脚本逻辑文件

协同工作

小程序成员权限：运营者、开发者、数据分析者

小程序版本/环境：开发版、体验版、审核中版、上线版（生产）

发布：全量发布（立即生效）、灰度发布

小程序框架

程序(App)

注册App

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

访问App

const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
// app.func app添加方法

页面(Page)

注册Page

Page({
  data: { text: "This is page data." },
  onLoad: function(options) { },
  onShow: function() { },
  onReady: function() { },
  onUnload: function() { },
  onHide: function() { },
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onShareAppMessage: function () { },
  onPageScroll: function() { }
})

组件

内置组件

view：视图容器

text：文本内容

image：图片媒体

swiper/swiper-item：滑块视图容器

自定义组件

视图层

wxml

变量

``

指令

wx:if=""

wx:for="" wx:for-item="val" wx:for-index="i" :wx:key="i"

事件监听

bind:tap="handle"：监听事件

catch:tap="handle"：监听事件并阻止向上/向下冒泡

capture-bind/catch="handle"：监听捕获阶段事件

双向绑定

<input model:value="" />
<custom-component model:my-value="" />

// custom-component.js
Component({
  properties: {
    myValue: String
  },
  methods: {
    update: function() {
      this.setData({
        myValue: 'leaf'
      })
    }
  }
})

自定义属性

data-var，在组件事件触发可被传递

模板

template，本质是一段模板字符上作为页面的占位符

wxss

rpx单位

样式导入

@import "common.wxss";`

wxs

内联模块脚本，可定义一些变量（非状态）和函数

<wxs module="utils">
var msg = "hello world"
var getMax = function(array) {
  return Math.max(...array);
}

module.exports = {
  message: msg,
  getMax
};
</wxs>

<view>  </view>
<view>  </view>

API

路由跳转

wx.navigateTo({url: ‘页面路径’})：可返回

wx.redirectTo({url: ‘页面路径’})： 重定向

wx.switchTab({ url: ‘pagePath’ })：tabBar路径

wx.navigateBack()：页面返回

wx.reLaunch()：重启小程序

登录授权

wx.login()：获取返回的登录状态密钥

wx.getSetting()：获取用户允许的小程序权限

wx.authorize()：主动发起授权请求

wx.getUserInfo() ：获取用户信息，仅配合button使用

注意：新版本小程序获取用户信息不再弹出授权，可使用button.open-type获取或者open-data展示用户信息

云开发

云函数

  1. 本地project.config.json配置指定云函数根目录
  2. 在云函数根目录创建nodejs云函数，编写云函数
  3. 上传并部署云函数至云端，可在云开发控制台查看
  4. 本地开发使用wx.cloud.callFunction(name,data,success)访问云函数

普通小程序转云开发小程序

  1. 指定云函数根目录

  2. app.js的onlunch周期添加

    "cloud": true,
onLaunch: function () {
wx.cloud.init({
 traceUser: true,
});

上传云

  1. 调用选择文件接口
  2. 上传完成，得到临时文件路径
  3. 调用上传云端存储接口，将临时文件以指定名称上传至存储目录

云数据库

  1. 链接云数据库

    • let db = wx.cloud.database();

  2. 向集合插入文档

    db.collection('db1').add({
 data: {文档数据},
}).then(res => console.log(res))

  3. 获取集合文档

    db.collection('db1').doc('_id标识').get();
db.collection('db1').where({name: 'page'}).get();

  4. 更新集合文档

    db.collection('db1').doc('_id标识').update({
 data: {文档数据},
}).then(res => console.log(res))

  5. 删除集合文档

    db.collection('db1').doc('_id标识').remove({
 successs(res){...}
})
删除多条文档需通过云函数

开发工具

快捷键帮助 f11

ctrl+p：快速打开文件

ctrl+e：最近打开文件

小程序框架

  • Lin UI：可在小程序快速实现布局，自定义tabBar等组件
  • mpvue：支持vue框架方式开发小程序
CATALOG
JavaScript 类库 vue
FRIENDS