微信小程序运行流程

发布者：济宁果壳科技

发布时间：05-28

浏览数：4132

关键词：微信小程序，济宁果壳科技，小程序运行

摘要：微信小程序运行流程，济宁网站建设，济宁微信公众号开发，济宁seo优化推广，济宁手机APP开发，济宁微商城开发，济宁做网站，济宁网络公司，济宁果壳科技

一.微信小程序是啥

本质其实就是（混合）的app 介于web app与native 原生app之间，具备丰富的调用手机各种功能的接口，同时又具备灵活性，跨平台

1. 运行环境差异

微信小程序运行在三端：iOS、Android 和用于调试的开发者工具。

三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的
在开发工具上，小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的来自官方文档说明

2.小程序目录结

project

├── pages

| ├── index

| | ├── index.json index 页面配置

| | ├── index.js index 页面逻辑

| | ├── index.wxml index 页面结构

| | └── index.wxss index 页面样式表

| └── log

| ├── log.json log 页面配置

| ├── log.wxml log 页面逻辑

| ├── log.js log 页面结构

| └── log.wxss log 页面样式表

├── app.js 小程序逻辑

├── app.json 小程序公共设置

└── app.wxss 小程序公共样式表

二、小程序架构

微信小程序的框架包含两部分View视图层(可能存在多个)、App Service逻辑层(一个)，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行。

视图层使用WebView渲染，逻辑层使用JSCore运行。

视图层和逻辑层通过系统层的WeixinJsBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

重点讲一下wxs :

由于view 与 App Service是不同线程,之前是传递数据,当遇到一些数据需要在view中处理时,就可以用wxs来处理,如下所示定义 <wxs module="tools">,使用说明

index.js

//获取应用实例

const app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },
 //事件处理函数
  bindViewTap: function() {
  },
  onLoad: function() {
  }
})
<!--index.wxml-->
<view >
 <view >
 <text >{{tools.bar(motto)}}</text>
 <text >{{tools.foo}}</text>
 </view>
 <wxs module="tools">
  var foo = "'hello world' from comm.wxs";
  var bar = function(d) {
    return '啥子玩意'+d;
  }
  module.exports = {
    foo: foo,
    bar: bar
  };
 </wxs>
</view>

济宁果壳科技-济宁小程序开发-济宁微信公众号开发-济宁SEO优化-济宁网站建设-济宁代运营