Debido a las necesidades laborales, el autor participó una vez en un proyecto que integraba el subprograma WeChat con el sistema SAP, por lo que aprendí el conocimiento de desarrollo del subprograma WeChat desde cero. Aquí comparto lo que he aprendido a través de una serie de artículos, con la esperanza de ayudar a los estudiantes relevantes.
Los dos primeros artículos de este tutorial:
- Serie de desarrollo de miniprogramas de WeChat (1): construcción del entorno de desarrollo y diseño de vista y desarrollo de miniprogramas de WeChat
- Serie de desarrollo de miniprogramas de WeChat (2): descripción general de la depuración de un solo paso y los pasos de implementación del controlador para los miniprogramas de WeChat
A través de la introducción de los dos primeros artículos de este tutorial, ya tiene una comprensión básica de la vista y el controlador del subprograma WeChat y el uso del depurador de WeChat. Sobre esta base, estudiemos más a fondo el controlador del subprograma WeChat y dominemos el método de respuesta a la entrada del usuario en el controlador del subprograma.
Este ejemplo es muy simple, en la vista index.wxmldel , defino un botón y un elemento de texto.
<button bindtap="jerry_increase"> 点我加1 </button>
<text class="user-motto">{
{counter}}</text>
El elemento de texto está vinculado al countercampo y es un contador. El botón tiene un controlador de eventos asociado jerry_increase.
Cada vez que se hace clic en el botón, el contador en la interfaz de usuario del subprograma WeChat se incrementa en uno.
Para hacer esto, primero debemos agregar un campo al modelo de datos index.jsde .counter
Luego implemente buttonla bindtapfunción enlazada jerry_increasede .
Puede ver que este controlador de eventos tiene un parámetro de entrada e:
Cuando se llama al controlador de eventos, el marco de WeChat pasa automáticamente el parámetro de entrada e al controlador de eventos. Los detalles de este parámetro e se pueden ver a través del depurador de la herramienta para desarrolladores de WeChat: taplas coordenadas X e Y donde ocurrió el evento y el tipo de evento tap.
Si observamos desde la pila de ejecución de la función de procesamiento de eventos del controlador actual, encontramos que en la lógica de procesamiento de su capa anterior, es decir, la capa del marco de WeChat, se toman dos marcas de tiempo actuales antes y después de llamar a la función de procesamiento de eventos. Si la diferencia entre las marcas de tiempo es superior a 1000 milisegundos 30365, el archivo Reporter.slowReport.
A partir de esto, podemos ver que WeChat espera que la función de procesamiento de eventos implementada por los desarrolladores sea lo más eficiente posible y que el tiempo de ejecución no supere 1 segundo. En el escenario de uso de teléfonos móviles, 1 segundo de tiempo de espera no es demasiado corto para el usuario final.
Otro punto que vale la pena mencionar es que si JavaScriptmodifica , nada cambiará en la interfaz de usuario.
El siguiente es el enfoque incorrecto:
jerry_increase: function(e){
this.data.counter = this.data.counter + 1;
},
Esta es la forma correcta de hacerlo:
jerry_increase: function(e){
this.setData({
counter: this.data.counter + 1
});
},
Podemos entender el misterio pasando por la forma correcta de hacerlo:
Se puede ver this.setDataque c.default.emitse llamará a la función del marco WeChat y los datos más recientes se entregarán a través de la emitfunción .
Continúe para ver emitla implementación, puede encontrar que elemit método de la clase de herramienta WeChat se llama nuevamente : invoqueWebviewMethod.wx
A partir de la implementación interna de WAService.js, podemos encontrar que la ejecución del subprograma WeChat en el teléfono móvil en realidad se ejecuta en WebView.
Una vez que se ejecuta WeixinJSBridge.publish.apply(WeixinJSBridge, e)esta línea de código, se actualiza el contador en la interfaz de usuario.
Este artículo presenta cómo escribir JavaScript en el applet de WeChat para responder a eventos de clic de botón.
El próximo artículo de esta serie presentará algunas funciones nativas de WeChat proporcionadas por el componente de botón del subprograma de WeChat, como el uso de funciones poderosas como la obtención de información actual del usuario.
Llamada a la API del marco de WeChat
A través de la introducción hasta ahora, ya tiene una comprensión básica de la vista y el controlador del subprograma WeChat, el depurador de WeChat y cómo escribir funciones de JavaScript en el controlador de WeChat para responder a los eventos del usuario del subprograma WeChat.
Ahora desarrollaremos un ejemplo práctico de un subprograma WeChat para reforzar aún más lo que hemos aprendido anteriormente.
El efecto de este ejemplo es el siguiente: Se muestra un botón en el applet de WeChat: 获取头像昵称.
Después de hacer clic, el subprograma de WeChat recuperará automáticamente los detalles del usuario de WeChat APIque actualmente hace clic en este botón, como el apodo, el avatar, la provincia, la ciudad y otra información proporcionada por el , y los mostrará en la página del subprograma, como se muestra en la siguiente figura .
Ver diseño:
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 获取头像昵称 </button>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
<text class="userinfo-nickname">{
{userInfo.city}}</text>
<text class="userinfo-nickname">{
{userInfo.country}}</text>
<text class="userinfo-nickname">{
{userInfo.province}}</text>
</view>
Hay un total de 6 elementos de interfaz de usuario en esta vista, incluido 1 elemento de botón, 1 elemento de imagen y 4 elementos de texto.
El elemento del botón es responsable de responder a los eventos de clic del usuario y llamar a la API del marco de WeChat para leer los detalles del usuario.
1 elemento de imagen es responsable de mostrar el avatar del usuario de WeChat que hizo clic en el botón, y los 4 elementos de texto restantes muestran los detalles del usuario de WeChat. Las rutas de enlace de los últimos cinco elementos de la interfaz de usuario son todas userInfo, y userInfolos datos se leen llamando a la API de WeChat después de hacer clic en el botón.
Esta información de usuario es el modelo de datos que definimos en el controlador index.js:
Page({
data: {
userInfo: {
}
}
});
Volvamos atrás y veamos el buttonelemento , que tiene dos propiedades:
-
open-type="getUserInfo": indica que después de hacer clic en el botón, se llama automáticamente a la API del marco WeChat
getUserInfo; -
bindgetuserinfo="jerry_getUserInfo": especifica el nombre de una función de devolución de llamada que
index.jsse .
Cuando la llamada a la API del marco de WeChat recupera con éxito los detalles del usuario de WeChat, se llamará a la función de devolución de llamada que escribimos con los detalles del usuario de WeChat como parámetros de entrada.
jerry_getUserInfo: function(e) {
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo
});
}
En el contexto al que puede acceder el applet, hay una variable global wxque contiene todas las API expuestas por el marco de WeChat:
Hay una descripción de todos los miembros sobre esto en el sitio web del subprograma WeChat :wx
Probemos con otra API: getSystemInfo.
Primero defina un botón en la vista del applet y vincule una función de JavaScript jerry_systeminfo para activar getSystemInfo:
<button bindtap = "jerry_systeminfo"> 获取系统信息 </button>
A continuación, defina siete elementos de la interfaz de usuario para mostrar getSystemInfolos resultados devueltos de .
<text class="userinfo-nickname">{
{systeminfo.model}}</text>
<text class="userinfo-nickname">{
{systeminfo.pixelRatio}}</text>
<text class="userinfo-nickname">{
{systeminfo.windowWidth}}</text>
<text class="userinfo-nickname">{
{systeminfo.windowHeight}}</text>
<text class="userinfo-nickname">{
{systeminfo.language}}</text>
<text class="userinfo-nickname">{
{systeminfo.version}}</text>
<text class="userinfo-nickname">{
{systeminfo.platform}}</text>
wx.getSystemInfoEl resultado devuelto se usa como un parámetro de entrada, que se pasa automáticamente a la función de successdevolución y luego se usa setDatapara configurarlo en la estructura de datos de la vista.
jerry_systeminfo: function(){
var that = this;
wx.getSystemInfo({
success: function (res) {
var systeminfo = {
};
systeminfo.model = res.model;
systeminfo.pixelRatio = res.pixelRatio;
systeminfo.windowWidth = res.windowWidth;
systeminfo.windowHeight = res.windowHeight;
systeminfo.language = res.language;
systeminfo.version = res.version;
systeminfo.platform = res.platform;
try {
that.setData({
systeminfo: systeminfo
});
}
catch(e){
console.log(e);
}
}
})
},
Finalmente, después de hacer clic en "Obtener información del sistema" en mi teléfono Android Samsung, mostró SM-C7010información detallada, como el modelo de mi teléfono Samsung.
Resumir
Este tutorial primero presenta cómo el controlador del subprograma WeChat responde a los eventos de clic del usuario y luego presenta el método de cómo el subprograma WeChat consume la API de la plataforma WeChat a través de un ejemplo real de cómo obtener el apodo de WeChat y la señal del teléfono móvil del usuario actual.
Los dos primeros artículos de este tutorial:
- Serie de desarrollo de miniprogramas de WeChat (1): construcción del entorno de desarrollo y diseño de vista y desarrollo de miniprogramas de WeChat
- Serie de desarrollo de miniprogramas de WeChat (2): descripción general de la depuración de un solo paso y los pasos de implementación del controlador para los miniprogramas de WeChat