欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序总结

程序员文章站 2022-05-05 22:05:49
...

app.json的配置(全局)

{
// 用来配置页面的路径
"pages":[
"pages/index/index", // 首页
"pages/Test/Test" // 跳转的页面
],
"window":{
"enablePullDownRefresh": true, // 是否支持下拉刷新
"backgroundTextStyle":"dark", // 下拉刷新的字体颜色,支持light
"backgroundColor": "#e04c4c", // 设置下拉刷新的背景颜色
"navigationBarBackgroundColor": "#fff", // 设置微信程序顶部导航栏颜色
"navigationBarTitleText": "yejiawei", // 顶部导航栏文字
"navigationBarTextStyle":"black" // 顶部导航栏文字样式,black或者white
"onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
},
"tabBar": { // 设置tab切换栏的配置
"list": [
{
"pagePath": "pages/index/index", // 跳转的路径
"text": "首页", // tab的文字
"iconPath": "/images/t1.jpg" // 设置背景图路径
},
{
"pagePath": "pages/Test/Test",
"text": "测试",
"selectedIconPath": "/images/t1.jpg" // 设置选中时图片的路径
}
],
"color": "#e04c4c", // 设置tab按钮字体颜色
"selectedColor": "#000", // 设置按钮选中的颜色
"backgroundColor": "#1aad16", // 设置tab按钮的背景颜色
"borderStyle": "black", // 设置tabbar边框颜色,只支持black/white
"position": "top" // 设置tabbar的位置,设置为top无法显示图片
},
"networkTimeout": {
"request": 10000, // request请求的超时时间
"connectSocket": 10000, // connectSocket的超时时间
"downloadFile": 10000, // 下载文件的超时时间
"uploadFile": 1000 // 上传文件的超时时间
},
"debug": true // 开启debug模式,在控制台输出程序信息
}
page.json的配置(页面)

设置的配置用来覆盖app.json中的window配置
{
"navigationBarBackgroundColor": "#ffffff", // 设置微信程序顶部导航栏颜色
"navigationBarTextStyle": "black", // 顶部导航栏文字样式,black或者white
"navigationBarTitleText": "微信接口功能演示", // 顶部导航栏文字
"backgroundColor": "#eeeeee", // 设置下拉刷新的背景颜色
"backgroundTextStyle": "light", // 下拉刷新的字体颜色,支持light
"enablePullDownRefresh": true, // 是否支持下拉刷新
"disableScroll": true, // 是否支持滚动
"onReachBottomDistance": 50 // 设置上拉事件触发时距离底部的位置
}
程序入口函数(App)

App({
onLaunch: function (options) {
// 程序加载调用
},
onShow: function (options) {
// 从后台进入前台调用,默认程序第一次加载回调用
},
onHide: function () {
// 从前台切换到后台调用
},
onError: function (msg) {
// 程序报错调用
},
myFunc: function() {
// 自定义函数
},
globalData: {
// 全局自定义数据
userInfo: "yejiawei"
}
})
上面的onLaunch和onShow方法都有options参数,options参数里面有如下属性
{
path: "pages/index/index" // 程序打开的路径
query: {}, // 当调用wx.navigateTo可以传递query
scene: 1001, // 打开小程序的场景值
referrerInfo: { // 从其他程序中进入到此程序,会返回此字段
appId: ..., // 其他程序的appId
extraData: ... // 其他程序传递过来的数据
}
}
可以使用 var app = getApp(); 来获取小程序实例,console.log(app.globalData.userInfo)
页面的入口函数(Page)

Page({
data: {
msg: "haha" // 页面的状态
},
onLoad: function(options) { // 页面加载完毕触发 },
onReady: function() { // 页面渲染完毕触发 },
onShow: function() { // 页面开始渲染触发 },
onHide: function() { // 页面切换到后台触发 },
onUnload: function() { // 页面卸载触发 },
onPullDownRefresh: function() { // 页面下拉刷新触发},
onReachBottom: function() { // 页面上滑触底触发 },
onShareAppMessage: function () {
// 页面点击转发触发,需要return一个object,只有定义了此方法,才会有转发的功能
return {
title: "分享的页面", // 分享页面的标题
path: "/pages/logs/logs" // 分享的页面的路径
}
},
onPageScroll: function(options) { // 页面滚动触发 },
myFn: function() { // 自定义函数
console.log(this.route); // 获取当前页面的路径
this.setData({ // 修改状态
msg: "haha"
}, function() {
// 状态修改完,调用此方法
})
console.log(getCurrentPages()); // 获取当前页面栈实例
}
customData: { // 自定义属性 }
})
页面路由

方法wx.navigateTo(object) 跳转到指定的页面,无法跳转到tabbar页面(当前页保留)
wx.navigateTo({
url: ‘/pages/logs/logs?id=1‘, // 页面路劲,可以传递query参数
success: function() { // 导航成功执行
console.log("跳转成功");
},
fail: function() { // 导航失败执行
console.log("跳转失败");
},
complete: function() { // 导航完成调用
console.log("导航结束");
}
})
方法wx.navigateBack(object) 返回到之前的页面
wx.navigateBack({
delta: 2 // 后退2步
})
方法wx.redirectTo(object) 销毁当前页面,跳转到指定的页面,不能跳转到tabbar页面
使用方法和navigateTo一样
方法wx.reLaunch(object) 销毁所有页面,跳转到任意指定的页面
使用方法和navigateTo一样
方法wx.switchTab(object) 跳转到tabbar页面
使用方法和navigateTo一样
模块化

js文件可以使用exports和module.exports暴露接口
exports是module.exports的一个引用
function fn () {
console.log("导入的方法执行了");
}
exports.fn = fn;
使用文件中的方法
var common = require(‘../common.js‘);
common.fn();
WXML文件细节

状态绑定

变量使用双大括号包裹 <view>{{msg}}</view>
标签的属性使用双引号包裹 <view id="item"></view>
双引号里面的内容wx都会将其转化成字符串,所以true,false要表达本意需要再包裹双大括号
绑定对象,不需要对象的花括号 <template is="mytemplate" data="{{ a: 1, b: 2 }}"></template>
列表遍历

<view wx:for="{{[1,2,3,4,5]}}" wx:key="{{item}}">
{{index}}: {{item}}
</view>
给index和item取别名
<view wx:for="{{[1,2,3,4,5]}}" wx:for-index="myIndex" wx:for-item="myItem">
{{myIndex}}: {{myItem}}
</view>
渲染多节点代码块
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
遍历字符串
<view wx:for="array">
{{item}}
</view>
绑定key,当组件重排后根据id可以复用组件和组件的状态
<block wx:for="{{[1, 2, 3]}}" wx:key="this"> // 当item是字符串或者数字可以使用this代表item作为key
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
条件渲染

<view wx:if="{{false}}">haha</view>
<view wx:elif="{{true}}">haha1</view>
<view wx:else="{{false}}">haha2</view>
同样也可以使用block来控制多节点代码块
模板

声明一个模板
<template name="mytemplate">
<view>
{{a}}: {{b}}
</view>
</template>
使用此模板 obj: { a: 1, b: 2 }
<template is="mytemplate" data="{{...obj}}"></template>
事件

使用bindtap绑定事件 <view bindtap="fn" data-my-data="222"></view>
事件对象
myFn: function(event) {
console.log(event);
// 使用data开头的自定义属性,将保存再event.currentTarget.dataset中
}
事件分类
冒泡事件
touchstart 开始触摸
touchmove 触摸移动
touchcancel 触摸打断
touchend 触摸离开
tap 瞬间触摸
longpress 超过350ms的触摸
transitionend 过渡结束
animationstart 动画开始
animationiteration 动画执行一遍后触发
animationend 动画结束触发
非冒泡事件,除了上述事件以外都是非冒泡事件
绑定事件
可以使用bind和catch绑定
bindtap或者bind:tap 不阻止冒泡
catchtap或者catch:tap 阻止冒泡
在WXML文件中导入其他WXML文件

可以将上面讲的template代码,放到一个单独的wxml文件中,然后在当前文件中使用 <import src="../common.wxml" /> 导入,就可以立即使用了
而<include src="../common.wxml" />的作用,是将除了template和wxs以外的代码,都拷贝到include所在的位置
wxs的使用(代码可以单独写在wxs文件中,也可以写在wxs标签中)

模块

wxs的作用其实和js文件的作用是一样的,只不过提供了另外一种方式来写js
外界要访问wxs中定义的代码需要使用module.exports导出
创建一个wxs文件,定义如下代码
var message = "你好吗?";
module.exports.message = message;
在wxml文件中使用
首先使用wxs标签导入 <wxs src="../common.wxs" module="wxsData"/>
使用 <view class="demo">{{wxsData.message}}</view>
在其他wxs文件中使用
var wxsData = require("../common.wxs");
WXSS文件

尺寸单位使用rpx,一个rpx就代表一个物理像素
导入其他WXSS文件 @import "../common.wxss";
自定义组件(和vue里面的组件类似)

创建自定义组件的步骤

第一步,修改json
修改json文件为 { "component": true }
第二部,WXML文件书写
<view class="demo"> {{text}} </view>
<slot></slot>
slot就是插槽,和vue的一样
第三步,WXSS中书写
.demo{ color: red; }
只能使用类选择器
第四部,js文件中写
Component({
properties: {
// 组件的属性,可以指定类型和默认值,和vue的props验证很像
text: {
type: String,
value: ‘默认值‘,
}
},
data: {
// 组件的状态
someData: {}
},
methods: {
// 组件的自定义方法
customMethod: function () { }
}
})
第五步,使用组件
在要使用此自定义组件的page中,修改他的json,插入如下字段
"usingComponents": {
"my-component": "../myComponent/myComponent"
}
在page组件中使用 <my-component></my-component> 即可
同时可以使用 <my-component text="我是传递的属性"></my-component> 传递属性值给组件内部
WXML文件的细节

写法和一般的WXML文件写法一致,不过多了slot
没有名字的slot只能有一个,如果要使用多个slot,需要操作如下几步
第一步,在js中的Component函数中,添加如下
options: {
multipleSlots: true
},
第二步,在WXML中写多个带名字的slot
<view class="demo"> {{text}} </view>
<slot name="a"></slot>
<slot name="b"></slot>
第三步,在页面中使用
<my-component text="我是传递的属性">
<view slot="a">我是a</view>
<view slot="b">我是b</view>
</my-component>
WXSS文件的细节

只能使用类选择器
可以继承组件外的样式
app.wxss文件中定义的样式,对组件无效
另外可以使用:host来定义组件标签的样式
:host{ color: black; }
js文件的细节

Component函数的使用如下
Component({
properties: { // 设置组件接受的属性
myProperty1: { // 属性名
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: ‘‘, // 属性初始值(可选),如果未指定则会根据类型选择一个
observer: function(newVal, oldVal){ // 监听属性值改变的函数 }
},
myProperty2: String // 简化的定义方式
},
data: {}, // 组件状态
methods: { // 设置方法
onMyButtonTap: function(){
console.log(this.id); // 组件标签的id
console.log(this.dataset); // 组件的data自定义属性集合
console.log(this.data); // 组件的属性和状态的集合
console.log(this.hasBehavior()) // 组件是否有behavior属性
this.setData({}) // 属性和状态都可以设置
/*
可以手动触发组件的自定义事件,比如,组件上绑定了一个自定义事件
<my-component bindmyEvent="myFn"></my-component>
要手动触发myEvent,需要调用
this.triggerEvent(‘myEvent‘, {
// 事件参数
}, {
bubbles: true, // 是否冒泡
composed: true, // 到父组件内部寻找同名事件
capturePhase: true // 是否捕获
}
);
/
}
},
created: function(){}, // 组件在内存中创建完毕执行
attached: function(){}, // 组件挂载之前执行
ready: function() {}, // 组件挂载后执行
detached: function(){}, // 组件移除执行
moved: function(){}, // 组件移动的时候执行
relations: {
/

嵌套的组件需要相互关联就要使用此字段
相同嵌套子节点的处理方式
假设嵌套的html结构如下
<custom-ul>
<custom-li> item 1 </custom-li>
<custom-li> item 2 </custom-li>
</custom-ul>
则custom-li组件中需要定义如下的relations
‘./custom-ul‘: { // 嵌套父组件的路径
type: ‘parent‘, // 关联的目标节点应为父节点
linked: function(target) { }, // custom-li插入到custom-ul时执行,target是custom-ul
linkChanged: function(target) { }, // custom-li被移动后执行,target是custom-ul
unlinked: function(target) { } // custom-li被移除时执行,target是custom-ul
}
在custom-ul组件中也要定义此字段,只不过反过来 type 改成 child
不同嵌套子节点的处理方式
<custom-div>
<custom-span> item 1 </custom-span>
<custom-div> item 2 </custom-div>
</custom-div>
此时就要使用behavior作为公共的节点路径了,假设custom-span和custom-div都有一个名为customFormControls的behavior
custom-span和custom-div内部定义relations的方式和之前一样,只不过将type改成ancestor
custom-div中定义
‘customFormControls‘: {
type: ‘descendant‘, // 关联的目标节点应为子孙节点
target: customFormControls
}
/
},
behaviors: [
/

behaviors的作用就是用来创建一个公用的组件js,内部代码和Component一模一样
Behavior({ //... })
主要用来和当前的Component代码合并,同名的属性以当前组件的为主
*/
]
})
按需加载

实现按需加载的步骤如下
主包中应只包含tabbar
第一步,在项目根目录下创建分包的文件夹,将分包的page写在里面
第二步,在app.json中添加如下配置
"subPackages": [
{
"root": "package1", // 分包文件夹根路径
"pages": [ // 分包中包含的路径,不能添加到app.json的page中
"pages/Demo/Demo"
]
}
]
在tabbar配置项中,不能应用分包的页面
第三步,使用分包文件
在tabbar的页面中,引用分包页
wx.navigateTo({
url: ‘../../package1/pages/Demo/Demo‘
})



 

云函数调用失败

在实现用云函数将页面信息存入数据库的时候,报错:云函数调用失败,于是反反复复的去查看云函数语法逻辑是否有错,但是发现并没有问题 。于是在网上找了很多资料,终于找到了解决办法

//直接上代码
//这是报错前的代码
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('users').add({
    data: {
      username: event.username,
      gender: event.gender,
      phone: event.phone,
      depart: event.depart
    }
  })
}

//这是成功后的代码
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
  return await db.collection('users').add({
    data: {
      username: event.username,
      gender: event.gender,
      phone: event.phone,
      depart: event.depart
    }
  })
}

可以发现,两者之间的差别在于cloud.init(),前后者都是初始化,但是后者加了 env: cloud.DYNAMIC_CURRENT_ENV,这样云函数内发起数据库请求、存储请求或调用其他云函数的时候,默认请求的云环境就是云函数当前所在的环境

了解更多请前往微信开发文档 init

就这样我的问题就解决了

 

 

post请求,参数为键值对格式

微信小程序总结

wx.request({
      url: '',
      method: 'POST',
      data:'pageSize=1&pageNum=10',    //参数为键值对字符串
      header: {
        //设置参数内容类型为x-www-form-urlencoded
        'content-type':'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          items: res.data
        })
      }

    })

微信小程序总结

POST请求,参数为json格式

微信小程序总结

wx.request({
  url: 'test.php', //仅为示例,并非真实的接口地址
  data: {          //参数为json格式数据
     x: '' ,
     y: '',
     z:12
  },
  header: {
      //设置参数内容类型为json
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

微信小程序总结

wx.request() 示例:

微信小程序总结

Page({
  data: {
    motto: 'wzh ... '
  },
  //事件处理函数
  onLoad: function (options) {
    var that = this

    //技能资讯列表
    wx.request({
      url: 'http://192.168.1.103/yiji/skillList.php',
      method: 'POST',
      data:'pageSize=1&pageNum=10',
      header: {
        'content-type':'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
        //这样赋值现在是不能将数据传走的,必须使用setData()方法
        //that.data.items = res.data ;
        //官方文档指出必须使用setData()方法才能将数据传走
        that.setData({
          items: res.data
        })
      }

    })
  }
})

 

 

创建第一个集合

打开控制台,选择 "数据库" 标签页,通过 "添加集合" 入口创建一个集合。假设我们要创建一个待办事项小程序,我们创建一个名为 todos 的集合。创建成功后,可以看到 todos 集合管理界面,界面中我们可以添加记录、查找记录、管理索引和管理权限。

微信小程序总结

相关标签: css html5