小程序开发教程

1.    小程序开发

根据微信官方的说明，wxApp的运行环境有3个平台，IOS的webkit（苹果开源的浏览器内核），Android的X5(QQ浏览器内核)，开发时用的nw.js（C++实现的web转桌面应用）；

 

微信开发工具

 项目结构

 project.config.json:项目配置文件，支持es6配置，appid等信息

pages:功能页面

app.json：应用主题样式及pages路由配置，其中pages路由第一项决定首页

app.wxss:pages通用样式

App.js:应用入口，pages可通过getApp()获取，提供公用接口及数据

 

页面结构

 js功能逻辑实现，页面数据、页面交互事件处理

wxml页面布局文件

wxss页面组件样式

 

应用启动

生命周期函数主要有以下3个：onLaunch（初始化完成），onShow（启动时，后由后台进入前台），onHide（由前台进入后台）

App.onLaunch()-->App.onShow()-->pages[0].onLoad()-->App.onLaunch.onHiden()

onLaunch()用户授权信息获取，调用异步api: wx.login()、wx.getSetting()

Index.onLoad()页面加载，获取数据调用更新页面setData

Page实现

 

页面组件关联事件：

<view wx:if="{{!hasUserInfo&& canIUse}}" class='login-box'>

….

<block wx:else>

….

block>

<button bindtap='onBindSTBClick'>关联盒子button>

<button open-type="getUserInfo"bindgetuserinfo="getUserInfo" class='login-btn'>登陆button>

<image bindlongtap="onSelectImage" class="userinfo-avatar"src="{{userInfo.avatarUrl}}" background-size="cover">image>

<navigator url="/pages/voicesearch/voicesearch?key=value">跳转到新页面

 

样式基本与H5 css一致

.user-info-box {

display: flex;

flex: 1;

flex-direction: column;

align-items: center;

background-color: skyblue;

width: 100%;

padding: 30rpx 0;

}

 

页面业务逻辑：

注意没有document、window全局变量，支持promise

var { wxAsyncApi } = require('../../utils/util.js');

Page({

data:{

},

onBindSTBClick(e){

console.log(msg);

},

onSelectImage(e){

}

});

 

官方文档

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html

注意事项

wx.connectSocket需要在header携带sec-websocket-protocol:'xmpp'信息，否则真机无法连接成功

nginx:需要配置'ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;'否则部分真机无法连接成功