【微信小程序】开发总结

最新推荐文章于 2021-11-18 15:28:23 发布

李静阿

最新推荐文章于 2021-11-18 15:28:23 发布

阅读量173

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_43476931/article/details/103363704

版权

前端学习专栏收录该内容

13 篇文章 1 订阅

订阅专栏

微信小程序代码构成

代码构成	作用
json	小程序页面相关的配置
wxml	模板、与html类似
wxss	样式、与css类似
js	逻辑交互

在小程序中的wxml用的标签是 view, button, text 等等。
app.json是小程序的全局配置，page描述当前小程序所有页面路径；window定义小程序所有页面的顶部背景颜色，文字颜色定义等；tabBar为底部按钮的配置。
app.wxss是小程序的全局样式，会作用于当前小程序的所有页面。
sitemap.json文件用来配置小程序及其页面是否允许被微信索引。

{
  "pages": [
    "pages/index/index",
    "pages/post/post",
    "pages/getExpress/getExpress",
    "pages/goExpress/goExpress",
    "pages/mine/mine",
   
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "快递助手",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "black",
    "selectedColor": "#1296db",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon/shouye1.png",
        "selectedIconPath": "images/icon/shouye.png"
      },
      {
        "pagePath": "pages/getExpress/getExpress",
        "text": "取件",
        "iconPath": "images/icon/qujian1.png",
        "selectedIconPath": "images/icon/qujian.png"
      },
      {
        "pagePath": "pages/goExpress/goExpress",
        "text": "寄件",
        "iconPath": "images/icon/jijian1.png",
        "selectedIconPath": "images/icon/jijian.png"
      },
      {
        "pagePath": "pages/post/post",
        "text": "驿站",
        "iconPath": "images/icon/yizhanxiangqing_o1.png",
        "selectedIconPath": "images/icon/yizhanxiangqing_o.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/icon/renwu1.png",
        "selectedIconPath": "images/icon/renwu.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

小程序生命周期钩子函数

Page({

  /**
 * 页面的初始数据
   */
  data: {
    msg: '开启小程序之旅'
  },

  /**
 * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
 * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
 * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
 * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
 * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
 * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
 * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
 * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

在这里插入图片描述
图片转自:https://res.wx.qq.com/wxdoc/dist/assets/img/page-lifecycle.2e646c86.png

跳转(页面路由)

	wx.navigateTo({
			url:"pages/getExpress/getExpress",
			success:function(){
				console.log("called navigateTo")
			},

	})
	保留当前页面，跳转到相应页面，使用wx.navigateBack()返回保留页面
	wx.switchTab({
		url:"pages/getExpress/getExpress",
		success:function(){
			console.log("called switchTab")
		}
	})
	switchTab 只能打开 tabBar 页面。
	wx.redirectTo({
		url:"pages/getExpress/getExpress",
		success:function(){
			console.log("called redirectTo")
		}
	})
	关闭当前页面，跳转到应用内的某个页面

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。

WXML语法参考

内容

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello World!'
  }
})

控制属性(需要在双引号之内)

<block wx:if="{{TabCur==0}}"></blok>
<block wx:if="{{TabCur==1}}"></blok>
<block wx:if="{{TabCur==2}}"></blok>

page({
	data:{
		TabCur:["代取件","运输中","未发货",],
	}
})

条件渲染
<view wx:if="{{length > 5}}"> </view>

关键字(需要在双引号之内)

<checkbox checked="{{true}}"></checkbox>

列表渲染
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'hello',
    }, {
      message: 'lijing'
    }]
  }
})
输出结果：
0：hello
1：lijing

模板：页面中使用
	<template is="msgItem" data="{{...item}}"/>
	<template name="msgItem">
	  <view>
	    <text> {{index}}: {{msg}} </text>
	    <text> Time: {{time}} </text>
	  </view>
	</template>

发起请求

Page({
  data: {
   items: [],
  },

 onShow: function (options) {
	wx.request({
	      url: 'http://xxxxxxxxxxxx/devices/all',
	      method: 'Get',
	      success: (res) => {
	        console.log('设备', res.data.data);
	        this.setData({
	          items: res.data.data
	        })
	      }
	    }),
  }
})

引用组件的方式

如果想引入哪一个npm包时，直接npm install （包名称） --production就可以了。
在引入npm包以后，要记得构建npm和允许使用npm：构建的位置在小程序开发工具–>工具 --> 构建 npm ，允许使用npm，在小程序开发工具–>详情–> 使用npm模块。

js 中引入 npm 包：
const package = require('packageName')

使用 npm 包中的自定义组件：
{
    "usingComponents": {
      "myPackage": "packageName",
    }
}

事件

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

类型					触发条件
touchstart			手指触摸动作开始	
touchmove			手指触摸后移动	
touchcancel			手指触摸动作被打断，如来电提醒，弹窗	
touchend			手指触摸动作结束	
tap					手指触摸后马上离开	
longpress			手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）	
transitionend		会在 WXSS transition 或 wx.createAnimation 动画结束后触发	
animationstart		会在一个 WXSS animation 动画开始时触发	
animationiteration	会在一个 WXSS animation 一次迭代结束时触发	
animationend		会在一个 WXSS animation 动画完成时触发	
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发
除上述之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件。

组件

微信小程序的官方组件
GitHub地址：https://github.com/Tencent/weui-wxss
npm下载：npm i weui-wxss

colorUI样式组件(相比其他组件样式很好看)
GitHub地址：https://github.com/weilanwl/ColorUI

微信小程序的云开发

云函数：后台代码写的地方，不需要部署

	数据库：存储数据（1个G）MongoDB(NoSql):添加集合,const db=wx.cloud.database;db.collection('demo').get({
		success:res=>{
			console.log(res.data)
		}
	})
	权限设置：所有用户


	文件存储：存储图片(5个G)

	新建->AppID->建立云开发快速启动模板->cloudfunction

	wx.cloud.callFunction({
		name:"函数名",
		data:{},
		success:function(res){

		}
	})

1.获取用户登录信息  wx.getUserInfo()
2.不同平台之间识别用户 UnionID();

3.同一个用户关注了不同的公众号，openid不同，

	A和B公众号之间，用户在A或者B中是通过openid来区分
	归属于同一个开发平台下（如同一个公司的不同产品）通过unionid来区分
	小程序
		wx.login()=>code
	↓
	=后端服务器
		code+appid+appsecret(密钥)
	↑
	=腾讯微信服务器
		session_key+openid+(unionid)
	授权：wx.authorize({}),wx.getSetting({})

wx.getLocation(Object object)
获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定 highAccuracyExpireTime 作为超时时间。

	//获取经纬度
	wx.getLocation({
	 type: 'wgs84',
	 success (res) {
	   const latitude = res.latitude
	   const longitude = res.longitude
	   const speed = res.speed
	   const accuracy = res.accuracy
	 }
	})

	"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于获取当前位置的天气信息" 
    }
  }

开发中会出现的问题

 https部署以及设置合法域名。
 1.小程序向后台请求接口必须使用https，包括web-view里的网页，如果项目中有用到web socket，那么也必须使用wss协议。https证书一般会用第三方的。比如阿里云的。
 2.在微信小程序管理后台，还需要配置合法域名。当然，在后台还没有部署https之前，我们也可以进行开发调试，只需要设置不校验合法域名，https证书等即可。

post请求，json数据格式转换
当我们向后台进行post请求的时候，当我们的传输数据的格式为json的时候，需要设置

微信小程序的background-image只支持网络图片，https的网络图片。

李静阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【微信小程序】开发总结

小程序生命周期钩子函数Page({ /** * 页面的初始数据 */ data: { msg: '开启小程序之旅' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: funct...
复制链接

扫一扫

专栏目录