微信小程序笔记

一、

am
1.微信小程序 mini program
2.优点 :不占用存储空间 节省使用的时间
3.发展历史 17年1月
4.入门
https://mp.weixin.qq.com/ 官网
https://developers.weixin.qq.com/miniprogram/dev/framework/ 文档

5. 小程序的内核 nwjs

6. 注册和下载 暂时无账号的，可以用体验账号

   微信开发者工具 登陆后， 开发/开发设置/appid
   7.冷启动 和热启动

8.模拟器 编辑器（右键／格式化代码） 调试器 云开发(云数据库和云函数)

9. 小程序模式
   10 .普通编译 ，可以指定启动页和启动参数
   11.编译 类似于刷新
   12.预览，真机查看小程序的运行效果
   13.真机调试 打开控制台窗口
   14.切后台，知道用户是哪种方式开启的小程序
   15.上传 开发版本 体验版本 审核版本 线上版本
   版本管理 成员管理

10. 项目的结构
    入口文件 app.js
    全局的配置文件 app.json 不能写注释
    全局的样式文件 app.wxss rpx 适配
    17.项目的配置
    alt+⬆ 可以切换页面的顺序
    直接在 pages里面写路径和名字 如 pages/test/test

    “backgroundColor”:"#0f0", 下拉时刻看到的背景颜色
    “backgroundTextStyle”: “light”, 下拉时loading的颜色
    enablePullDownRefresh:true 开启

    style:“v2” 去掉
    指定的weui的版本

pm

1.小程序全局设置
debug 打开调试
tabbar 至少两项，最多5项 含有当前页面 list position
pages
window pageOrientation landscape
networkTimeout
2.页面
js data 写数据
wxml 结构
wxss 样式
json 页面的配置文件 当页面的配置和小程序应用配置冲突的时候，以页面为准
disableScroll usingComponents
wxs 微信的脚本 增强wxml的计算能力


module.exports ={
…
}

3.页面的跳转 (路由)
xxx
tabbar 设置的页面要用open-type设置为 switchTab
xxx

tabbar 在切换页面的时候并没有卸载页面，而是显示和隐藏
onShow onHide onUnload

切换页面的时候，页面也要卸载
  tabbar 设置的页面要用open-type设置为 redirect

xxx
相当于 编程时导航
wx.redirectTo(Object object)
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

getCurrentPages() 获取当前栈里的页面
wx.switchTab 切换tabbar设置的页面
wx.navigateTo 压栈

二、

am

1.路由
tabbar
navigator 组件 向历史记录栈写入数据
wx.navigateTo 向历史记录栈写入数据
wx.redirectTo 关闭页面去跳转 会触发onUnload钩子函数
wx.switchTab 跳转 tabbar设置的页面
wx.navigateBack 压栈后才能返回
wx.reLaunch 各种页面都能跳转 不压入栈

2.事件处理函数传参
<组件 bindtap=“事件处理函数” data-变量＝"参数" />
event.target.dataset.变量 就可以拿到事件的参数

3.钩子函数
应用App
onLaunch 只执行一次
onShow 应用显示了
onHide 切后台
onError 错误的时候触发
页面 Page的钩子
page onLoad 执行一次
page onShow 执行多次
page onReady 可以更安全的通过节点拿到上下文对象
onPullDownRefresh 下拉刷新
在页面json文件里设置 enablePullDownRefresh
建议取数据或其他异步操作后，
要进行停止下拉刷新的动作 wx.stopPullDownRefresh()
onReachBottom 在页面json文件里设置距离 onReachBottomDistance
onPageScroll 页面滚动 disableScroll false(默认值)
onShareAppMessage 分享
path
title
onTabItemTap 单击tabbar时执行
onResize 页面尺寸变化的时候触发

4. 组件
   video
   map
   canvas
   cover-view

pm

1.页面的传参
wx.navigateTo({
url: ‘/pages/four/four?变量=值’,
})

接收页面的onLoad(options)  options.变量

2.onResize 横竖屏切换
app.json
window:{
…
“pageOrientation”:“auto”
…
}
“resizable”: true,
3.wxml 语法
wx:for
wx:if wx:else
this.setData({
key:value
})

4. 阻止冒泡 catchtap
   5.页面之间共享数据
   把公共的数据放到 App 注册函数里
   App({
   …
   变量:{
   key:value
   }
   …
   })
   其他页面都可以取到
   1. var app = getApp()
   2. app.变量.key 就可以取到值了。
      ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
      6.内置组件
      view text navigator video button cover-view
      
      时间处理函数(e) e.detail.value就是文本框的内容

三、

am

1.checkbox checkbox-group
2.template 模版
定义

模版的内容

使用

传递数据
<template is="模版的名字" data="{{key:value.....}}" />

模版的引用
<import src="路径" />  引入template之内的东西
<include src="路径" />引入template之外的东西

3.wxss
rpx（responsive pixel） 适配使用 动态设置样式

4. 常用的组件
   swiper bindchange 可以用e.detail.current 可以拿到当前轮播图的索引
   scroll-view
   scroll-into-view 动态设置id
   id="{{‘item’+变量}}"
   或 id=“item{{变量}}”
   scroll-with-animation 动画的方式滑动

pm

1.地图组件 map
2.获取当前的定位
wx.getLocation (longitude,latitude)
需要授权
“permission”: {
“scope.userLocation”: {
“desc”: “你的位置信息将用于小程序位置接口的效果展示”
}
}

3.rich-text 渲染html文本或节点

========================================

4.自定义组件
1) 新建一个组件
2) 在引用自定义组件的页面的json文件里用 usingComponents 进行注册
3）使用 <组件名 属性=“值” />
4) 组件通过properties 接收数据

父组件向子组件传值
子组件向父组件传值
this.triggerEvent(事件名,{key:value…});
父组件 监听事件 bind+事件名=“事件处理函数"
事件处理函数的参数中就能拿到值
5.第三方组件
引入vant
npm init -y
npm i vant-weapp -S --production
工具/构建npm
详情/本地设置/使用npm模块
注册组件
使用

================================================
6.常用 的Api
wx.request
1.添加域名列表
2.https
开发时可忽略这两点
详情/不校验域名

wx.login

**

四、

**
am
1.api

wx.request
wx.getLocation
wx.createVideoContext
wx.login

身份验证
1） wx.login 把code发给服务端 服务端接收code
2) 服务器端 用code appid appsecret 发请求，做个认证
npm i request --save
3）auth.code2Session
openid session_key 产生一个自定义的登陆态（token)

   wx.request 发请求 每一次都是一个新的session
4) 把token存储起来
5) wx.request 发请求 header 带上token

2.wx.request 的封装
3.wx.setStorageSync(key,value)
wx.getStorageSync(key)
4.wx.previewImage
5.camera组件和拍照
6.wx.chooseImage
7.wx.showActionSheet
8.wx.createSelectorQuery() 获取节点的信息

pm

1. 动态修改标题
   wx.setNavigationBarTitle
   2.wx.openLocation 适合做到我这来这样的功能
   3.wx.getSystemInfoSync
   4.地图的控制
   1)创建地图的上下文对象 wx.createMapContext
   2) 进行移动 ctx.moveToLocation
   5.wx.chooseLocation 选择地址
   address
   latitude
   longitude

**

五、

**

am

1.自定义导航栏
app.json
“navigationStyle”:“custom”
2. wx.setNavigationBarColor
3.placeholder (h5 ::placeholder)
小程序里 placeholder-class placeholder-style

Page({
…
key:{ //存储交易信息

  }

…
})

云开发 serverless理念

云数据库
json 文件
{
key:value
}
{
key:value
}
…

wx.cloud.init()
var db = wx.cloud.database()
注意权限的问题
db.collection(“集合的名字”).where({})get().then(callback)

db.collection("集合的名字").add  添加记录

db.collection("集合的名字").doc().remove()  删除记录
db.collection("集合的名字").doc().update({
	data:{
		key:value
	}
	})  删除记录

pm
1.地图marker control
2.在地图上标注
3.模糊搜索

db.collection(‘集合的名字’).where({
description: db.RegExp({
regexp: ‘查询的关键词’,
options: ‘i’,
})
})
4.组件支持多插槽
multipleSlots:true
5.用canvas 做个涂鸦
6.体验云函数
新建一个nodejs云函数
const cloud = require(‘wx-server-sdk’)
cloud.init()
var db = cloud.database();
var list = db.collection(“nz1913”);
// 云函数入口函数
exports.main = async (event, context) => {
return await list.get()
}
上传并部署
wx.cloud.callFunction({
name:‘test’
data:{ 参数
key:value…
}
}）

！！