微信小程序开发常用知识点

与iOS开发很相似，小程序的导航栏也可以全局设置一下，在公共文件app.json中设置了导航栏相关样式如下：

这个地方是全局设置，如果想要在不同的页面设置各自的标题属性芹数烂，只需要在该子级文件中设置

子页面想调用共公js的方法，需先在子页面js中先实例化app:具体过程如下

在需要调用的子页面中，

如果是嵌套循环，很容易出现多个list和index，例如表视图一样，所以在小程序中可以重命名 list 和index 方法为：wx:for-index='重命名' wx:for-list="重命名"

在APP开发中，UI复用是一个很好的手段，在小程序上就是模板template。

在逛小程序联盟的时候发现了一个大湿总结的比我好，搬过来一下。

微信小程序中，如果几个页面中需要引用同一个header/footer，当定义了公共模板时，有两种引用方法如下：

方法一：在公共模板中定义template元素，利用 方法 ,这种方式只会显示公共模板的template里面的内容，之外的内容不会显示

** 方法二:**

总结：import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容，显而易见，include方式更简单一些，在wxml中只需要一句话即可。

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。

具体的 这里有一片文章介绍的很详细 ， 还有这个

小程序的事件主要有：

小程序中的wxml中绑定事件有两种：以touchtab为例 ，在wxml中必须有bind/catch不然无法实现上述事件

bindtouchtab和catchtouchtab bind的不会阻止事件冒泡（元素最里层到最外层函数执行），catch会阻止冒泡，只是冒泡到当前层结束

如果想在元素执行某事件时把元素的某个属性传到后台 可在元素中加入data-属性嫌漏名称=“xxx”,在事件函数中 function(event){}的event中的currentTarget里面的data-set里面可查看接收在元素中绑定的的id或者其他属性clientX/Y 查看滑动手指距离屏幕左侧的位置，查看滑动位置也可以通过touchstart和和touchend的clientx/y获取

看到几个别人写的，瞬间石化，果断收藏。

在小程序中，定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：

1：在utils被调用的js文件中，面向对象的方式模型输出： module.exports={要调用的函数名称：要调用的函数名称 }；

2：在要调用的js文件中模块化引入utils的js文件 var object=require("utils被调用的js文件地址")； 可以输出一下object就能看到被调用的方法了；

例子如下：

要调用的js文件：

小程序的后台获取数据方式get/post具体函数格式如下：wx.request({})

如果屏幕中某元素的内容超过此元素的高度，可设置元素为scroll-view 为滚动状态元素，这样可以做到元素固定高度且元毕拿素内容滚动屏幕不滚动的效果；

scroll-view标签的主要属性分为以下几种：

微信小程序广告轮播元素 图片所在元素/swiper-item>

其中属性有：

图片更改事件：bindchange='imgchange' imagechange()的e.detail.current为当前显示页面的下标值

基础使用方法

基础方法包含获取微信小程序监控SDK并初始化、上报和设置安全域名这三个步骤：

获取微信小程序监控SDK并初始化：

在微信小程序/utils目录下新建wxLogger.js文件，并将JS文件的内容复制并粘贴至新建的wxLogger.js文件中。

在/utils目录下新建monitor.js文件，并将以下内容添加至新建的monitor.js文件中以完成初始化。

说明 您可以自定义JS文件的名称和存放位置。

如果项目使用node module (require) 方式集成，则添加以下内容：

const WXLogger = require('./wxLogger.js')

const Monitor = WXLogger.init({

pid: 'xxx',

region: 'cn',// 指定应用部署的地域：中国设为cn，海外地区靠近新加纤春岁坡的设为sg。

})

export default Monitor

如果项目使用ES module (import) 方式集成，则添加以下内容：

import WXLogger from './wxLogger.js'

const Monitor = WXLogger.init({

pid: 'xxx',

region: 'cn',// 指定应用部署的地域：中国设为cn，海外地区靠近新加坡的设为sg。

})

export default Monitor

说明 关于参数的详细配置，请参见通用SDK配置项。

使用以下方法静默采集PV、Error、API、性能及Health数据：

在app.js中，使用Monitor.hookApp(options)方法静默捕获Error类日志。其中的options即为App层相应的Object配置。

import Monitor from '/util/monitor'

App(Monitor.hookApp({

onError(err) {

console.log('进入onError:', err)

},

onLaunch() {

console.log('进入onLaunch')

},

onShow(options) {

},

onHide() {

}

}))

在page的JS文件中通过Monitor.hookPage(options)方法静默上报API请求、PV、Health数据。

import Monitor from '/util/monitor'

// 使用hookPage后，生命周期的API会自动打点。

Page(Monitor.hookPage({

data: {},

onLoad(query) {

},

onReady() {

// 页面加载完成。

},

onShow() {

},

onLoad(query) {

},

onHide() {

},

onUnload() {

}

}))

设置安全域名：

如果region设为cn，则将https://arms-retcode.aliyuncs.com添加到Request合法域名。

如果region设为sg，则将https://arms-retcode-sg.aliyuncs.com添加到Request合法域名。

API方法：静默打点基础API

方法 参数 备注 示例使用场景

hookApp {} 请传入原有的App参数。 在App的生命周期中自动打点。

hookPage {} 请传入原有的Page参数。 在Page的生命周期中自动打点。

说明 小程序监控项目如需使用hookApp、hookPage嵌入生命周期打点，必须符合标准小程序关于App和Page的规范，即森链App层有onError，Page层有onShow、onHide、onUnload。使用方法毁睁示例，请参见基础使用方法。

API方法：其他设置API

方法 参数 备注

setCommonInfo {[key: string]: string} 设置日志基础字段，可用于灰度发布等场景。

setConfig {[key: string]: string} 设置config字段，具体 *** 作，请参见SDK参考。

说明 对于setConfig方法，小程序场景不支持配置uid，您可以使用setUsername代替uid标识用户。

pageShow {} Page Show打点，发送PV数据。

pageHide {} Page Hide打点，发送Health数据。

error String/Object 错误日志打点。

api 请参见API参考 API类日志上报。

sum/avg String 自定义求和、求均值日志上报。

进阶场景

当基础使用方法无法满足需求时，请参见以下进阶场景：

手动上报API相关信息（不采用静默上报方式）：

将disableHook设为true，不静默上报wx.request请求的日志。

手动调用api()方法上报API相关信息。

取消静默上报并改为手动打点：

在App和Page对应的JS文件中不再使用hookApp、hookPage方法。

如需发送当前页面的PV数据，则在Page的onShow方法下调用pageShow()方法。

说明 请勿与hookPage()方法同时使用此方法，否则会造成PV类日志重复上报。

import Monitor from '/util/monitor'

Page({

onShow: function() {

Monitor.pageShow()

}

})

如需发送当前页面的Health类数据，统计当前页面的健康度和页面停留时间，则在Page的onHide和onUnload方法下调用pageHide()方法。

说明 请勿与 hookPage()方法同时使用此方法，否则会造成日志重复上报。

import Monitor from '/util/monitor'

Page({

onHide: function() {

Monitor.pageHide()

},

onUnload: function() {

Monitor.pageHide()

}

...

})

通用SDK配置项

ARMS前端监控提供一系列SDK配置项，让您能够通过设置参数来满足额外需求。以下是适用于本文场景的通用配置项。

参数 类型 描述 是否必选 默认值

pid String 项目唯一ID，由ARMS在创建站点时自动生成。 是 无

uid String 用户ID，用于标识访问用户，可手动配置，用于根据用户ID检索。如果不配置，则由SDK随机自动生成且每半年更新一次。 否 由SDK自动生成

tag String 传入的标记，每条日志都会携带该标记。 否 无

release String 应用版本号。建议您配置，便于查看不同版本的上报信息。 否 undefined

environment String 环境字段，取值为：prod、gray、pre、daily和local，其中：

prod表示线上环境。

gray表示灰度环境。

pre表示预发环境。

daily表示日常环境。

local表示本地环境。

否 prod

sample Integer 日志采样配置，值为1~100的整数。对性能日志和成功API日志按照1/sample的比例采样，关于性能日志和成功API日志的指标说明，请参见统计指标说明。 否 1

behavior Boolean 是否为了便于排查错误而记录报错的用户行为。 否 false

enableLinkTrace Boolean 进行前后端链路追踪，请参见使用前后端链路追踪诊断API错误原因。 否 false

ARMS前端监控还提供了更多SDK配置项，可满足进一步的需求。更多信息，请参见SDK参考。

小程序添加英文的方法是：

所有 *** 作都打包在组件里不需要在额外的地方添加代码，直接在你需要的页面里导入组件，再在对应页面的onLoad()里set文本就行了。

第一步，找个地方新建中英文两个字典，我是放在utils下面。

第二步，把切换语言的两个函数放在app.js里。

用wx.setStorageSync()方法来保存语言只是为了方便debug，你只用app.globaldata来传值也是完全没有问题的。

第三步，把切changeLanguage()方法bindtap在首页的元素里。

因为updateContent()方法放在onLaunch函数里，所以切换语言后我加了一个wx.reLaunch()重启首页，才能获取新的语言文本。

第四步，给所敬升耐有页面的onShow()里都加上如下亮春代码，然后别忘了把原本的文本都笑侍改成{{content.xxx}}这样的形式，就搞定啦。

---