wepy制作微信小程序

一、安装node.js

https://nodejs.org/en/

二、安装wepy-cli

1. 安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

2. 验证命令

npm config get registry

如果返回https://registry.npm.taobao.org，说明镜像配置成功。

3. 安装wepy-cli

npm install -g wepy-cli

三、创建项目

Wepy init standard projectName

进入项目安装依赖npm install

开启实时编译wepy build --watch

四、小程序开发者工具

关闭es6转es5

开启不校验合法域名

调试器面板: console network appData wxml storage

五、全局配置文件app.wpy

公共style

config：

pages

window

tabBar

显示隐藏tabBar

 

六、新建页面

1. 声明文件类型

// 声明一个App文件

export default class MyAPP extends wepy.app {}

// 声明一个Page文件

export default class IndexPage extends wepy.page {}

// 声明一个组件文件

export default class MyComponent extends wepy.component {}

2. App.js注册页面

3. 页面配置

config、data、components、methods、events（接受子组件广播）

onReachBottom、onPullDownRefresh

生命周期函数：onLoad、onShow、onReady、onHide、onUnload

执行顺序onLoad > onShow > onReady

onLoad可接收参数

onHide: 切换页面，程序退到后台

onUnload: 页面卸载

4. 数据绑定

5. 列表渲染

6. 条件渲染

七、页面跳转

跳转方式：组件  方法

navigateTo：保存当期页面跳转，可带参

redirectTo：关闭当前页面跳转，但不允许跳到tab页，可带参

reLaunch：关闭当前所有页面跳转，可带参

switchTab：跳转到tab页，并关闭所有非tab页，不可带参

navigateBack: 返回上一页。演示进到一个页面倒计时3秒返回上一页

八、 传参

方法传参：原生传参和wepy传参

页面传参：路径传参和缓存传参

缓存：设置、获取、清除指定、清除全部

九、组件标签

swiper：轮播

scroll-view：竖向滚动、横向滚动

rpx: 任何设备屏幕宽度规定为750rpx，在iphone6中标准为1px=2rpx，其他机型px/rpx换算：调用getSystemInfo()获取当前机型屏幕高度和宽度，根据比例计算

十、请求接口

示例接口：https://user.xionggouba.com/userGoods/listCategory?shopId=1

弹窗loading、toast、modal

十一、小程序登录

文档：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

示例接口：

http://190.168.2.1:8880/user/getOpenId、 post、 参数：jsCode

openid：同一个微信号的openid在每个小程序和公众号都不一样，因为生成openid需要用到appid和秘钥去计算生成，而一个邮箱账号只能注册一个小程序或者一个公众号，appid是不会相同的，固生成同一样的openid几率几乎是没有的。

unionid：同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionID 是唯一的。

 

十二、用户授权

需用户主动点击按钮触发

授权

点击按钮会弹窗提示用户是否同意授权获取，若同意时以后若再需授权不会弹窗访问，直接在成功回调函数即可获取到用户信息若是拒绝下次点击授权时还是会弹窗询问授权。

但是在授权地理位置权限时，如果第一次拒绝了授权，那么下次再点击时会直接报错，而不会再次弹窗窗口询问用户是否同意授权。需开发者引导客户自行前往授权页面开启对应的权限。

wx.getUserInfo回调信息

 

encryptedData：包括敏感数据在内的完整用户信息的加密数据。获取到以后将encryptedData、加密算法的初始向量iv返回给后端，后端根据这两个数据以及之前的session_key就可以解密出需要的unionid了。

所以若不需要用到unionid和用户微信基本信息时，程序没必要走授权用户信息。

同一个微信开放平台下的相同主体的 App、公众号、小程序，如果用户已经关注公众号，或者曾经登录过App或公众号，则用户打开小程序时，开发者可以直接通过 wx.login 获取到该用户UnionID，无须用户再次授权

十三、授权地理位置和保存相册权限

无需主动点击按钮

在第一次调用获取地理位置api或保存图片api时会自动弹窗询问授权，用户同意后以后还需调用该接口可以直接调取，不会再次弹出询问。若用户拒绝时，以后再次调用该接口回调函数都是fail，要引导用户打开授权信息页去开启相应的授权

十四、运行环境

因运行环境不同，故小程序的一些api或是样式在安卓和ios上也是有差异的，比如安卓特有的nfc系列接口，同步获取电量接口。Ios的绝对定位能随页面主题移动，安卓会定位在固定位置，Ios的canvas默认白底而安卓透明底等等。