【小程序】—- 基础知识汇总

2、基础使用

小程序尺寸单位：rpx
常用标签：
常用属性：wx:for，wx:if，wx:else，wx:key
事件绑定：bindtap，catchtap  
动态设置当前页面标题：wx.setNavigationBarTitle()
3、路由跳转方式

a.组件 
b.方法
wx.switchTab：只跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。【Tab切换】
wx.reLaunch： 关闭所有页面，打开到应用内的某个页面。【重启动】
wx.redirectTo：关闭当前页面，打开任意非tabBar页面。【页面重定向】
wx.navigateTo：保留当前页面，打开任意非tabBar页面，使用 wx.navigateBack 可以返回到原页面，最多十层。【打开新页面】
wx.navigateBack：关闭当前页面，返回上一页面或多级页面。【页面返回】
4、路由传参/页面传值

a. 给添加 ‘data-xxx’  
属性来 传递
我们需要的值，然后通过绑定事件的 e.currentTarget.dataset 或 onLoad 的 param 参数 获取

b. 设置 id 的方法标识来传值，即标签添加’data-id’ 属性 ，
通过 e.currentTarget.id 获取设置的id值，然后通过设置全局对象的方式 传递
到 app.globalData，在onLoad中使用option参数 接收

c. 在 navigator 路由跳转的 路径
中添加 参数传值
，可以进行拼接或传对象，在onLoad中使用option参数 接收

5、组件和页面之间传值

a. 组件传给页面 – 通过事件触发

* 组件的点击事件中：this.triggerEvent(‘eventName’, ‘传给页面的值’);
* 页面wxml中：
* 页面js中： change(e){console.log(e.detail)} //接收值

b. 页面传给组件 – 通过properties

* 页面wxml中：
* 组件js中：
properties: {
xxx:{
type:String,
value: ‘默认值’,
observer:function(newVal,oldVal){ // 可检验传递的值
console.log(newVal, oldVal)
}
}
}
6、数据双向绑定
小程序直接修改this.data的属性是不可以同步到视图的，必须调用this.setData。

7、事件

a、冒泡事件
bindtap事件绑定不会阻止冒泡事件向上冒泡。
b、非冒泡事件
catchtap事件绑定可以阻止冒泡事件向上冒泡。
8、缓存，存储

a、异步 

// 存储数据
wx.setStorage({ 
key:缓存数据的名称,
data:需要缓存的数据, 
success:成功回调 
}) 
// 获取数据
wx.getStorage({ 
key:”需要获取数据的名称”, 
success:成功的回调 
})
// 清除数据
wx.removeStorage(key) 

b、同步 

wx.setStorageSync(key,val)
wx.getStorageSync(key) 
wx.removeStorageSync(key)
9、授权 (点击button)

目前不推荐使用wx.getUserInfo()，建议通过button按钮发起用户授权。

10、封装请求

– 具体需要根据实际项目需求进行封装
– 参考：https://www.jianshu.com/p/2e80c96ce712
– 小程序默认请求：wx.request()
11、封装api

– 将所有接口放在统一的js文件并导出
– 在app.js中创建封装请求数据的方法
– 在子页面中调用封装的方法请求数据
12、自定义组件

1、通过Component({})来创建一个组件，注意组件中的事件需要写在methods中，最好以下划线开头
2、在使用组件的时候，在页面的配置项中配置usingComponents, key值为组件名称，val值为组件路径 
3、页面与组件进行传值的时候，在组件内部通过properties进行接收
4、详细了解：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
4、封装组件步骤：

• 在components中创建组件
• 组件json中添加：{ “component”: true}
• 页面json中添加：{ “usingComponents”: { “组件名”: “组件路径” } }
• 页面wxml中添加：

二、功能问题

1、登录

前端逻辑：

– 调用 wx:login(),获取code
– 调用后端登录接口，并将code传递过去，后端返回token
– 将token保存到本地
– 在app.js的onLaunch生命周期中，使用 checkSession 验证登录状态，若失效，则清除本地token，引导用户重新登录（也可以在封装的请求里）

后端逻辑：

– 获取code
– 结合appid,appsecret,code, 换取openid,session_key（不能给前端）
– 将wx的openid和本项目的用户系统进行关联
– 根据openid找到uid，将uid变成token返回前端
2、支付

– 前端调用下单接口，后端存储数据，处于未支付状态
– 后端请求微信的服务器，微信服务器验证身份，验证成功后返回prepay_id预订单id
– 后端接收到预订单id后进行加密操作，并将五个参数返回给前端
– 前端调用wx.requestPayment()方法，用户完成支付后将信息发送给微信服务器
– 微信服务器告知前端支付结果，前端进行展示
– 微信服务器再告知后端，后端将未付款的订单更新成已支付
3、地图

–

：点击页面按钮分享转发
– wx.hideShareMenu()：隐藏转发按钮，关闭转发功能
– 获取更多转发信息：如转发到群获取群的标识
a. 通过在 onLoad 和 onShow 中调用 wx.showShareMenu 并且设置 withShareTicket 为 true ；
b. 当用户将小程序转发到任一群聊之后被其他用户打开时，可以在 App.onLaunch 或 App.onShow 获取到一个 shareTicket ;
c. 通过调用 wx.getShareInfo() 接口传入此 shareTicket 可以获取到转发信息。
8、动态修改样式

a. 利用三目运算控制样式有无   

b. JS动态修改样式    <
view
style
=
"background:{{background}};"
> 通过setData动态修改数据

9、背景图的引用 

微信小程序中不允许引入本地路径背景图 
解决方案： 
1、base64:引入图片 http://imgbase64.duoshitong.com/ 
2、服务器地址引入图片 background:url('http://192.168.31.163:8020/pr/source/img/searchLeft.png')
10、点击图片进行预览、长按转发、保存、识别图中二维码

当预览的是本地的图片时，图片不能加载，只有来自于网上或者是通过手机相册选择、拍照获取的图片才可以成功显示，并且只能扫描小程序码。
a. 小程序中的图片不能识别除小程序码以外的二维码
b. 并且仅在 wx.previewImage 中支持长按识别
wx.previewImage({
current: this.data.imgalist,  // 当前显示图片的http链接
urls: this.data.imgalist  // 需要预览的图片http链接列表

})   

11、在小程序中如何打开另一个小程序

第一种： 第二种：
wx.navigateToMiniProgram({   
appId: '',  // 要打开小程序的appId 
path: 'page/index/index?id=123',  // 要打开的页面路径，如果为空则打开首页 
extraData: {   // 需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
foo: 'bar'
},
envVersion: 'develop', 
success(res) { 
// 打开成功 
} 
})
注：当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在app.json配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。
"navigateToMiniProgramAppIdList": [
"要跳转小程序的appId"
]

12、webview中的页面怎么跳回小程序中 

- 首先要引入最新版的jweixin-1.3.2.js
- 调用  wx.miniProgram.navigateTo({ url: '/pages/login/login'+'$params' }) //小程序链接
- 小程序页面中    // link为要打开的h5链接
13、小程序打开APP

打开APP

• open-type=“launchApp” 开放能力
• app-parameter=“wechat” 传参
• binderror=“launchAppError” 失败回调

注：安卓和 ios 端需要进行相应的配置。

- 开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 主包
，即放置默认启动页面/TabBar 页面，以及所有分包都需用到的公共资源/JS 脚本；而 分包
则是根据开发者的配置进行划分。
- 目前小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 12M
• 单个分包/主包大小不能超过 2M

- 优势：对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。