微信小程序起步

Posted zx125

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序起步相关的知识,希望对你有一定的参考价值。

微信小程序

文档

微信小程序开发文档

本质

so微信小程序到底是什么?是原生的app还是H5应用?

简单来说,小程序是一种应用,运行的环境是微信(App)进程中,使用了部分的H5技术

目录介绍

app.js为启动文件,启动生成app实例对象

配置全局app.json

app.json文档

注意json不能写注释

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
    #可以直接修改配置会自动生成界面
    "zx/zx/zx"
  ],
  "window":{
  	#下拉 loading 的样式,但是要首先开启下拉
    "backgroundTextStyle":"light",
    #header头栏目的背景
    "navigationBarBackgroundColor": "#fff",
    #header头栏目的文字
    "navigationBarTitleText": "WeChat",
    #header头栏目的文字的颜色(只能设置黑色和白色文字)
    "navigationBarTextStyle":"black"
  },
    "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

tabBar

注意pagePath一定要有存在的界面,否则不显示

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

page配置

logs.json

界面的配置就是一个单独的界面

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {},
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

page数据渲染

data界面初始化数据

  data: {
    name:\'zx\',
    num1:100,
    num2:200,
    bool:false,
    lis:[{name:\'zx\',love:\'wl\'},{name:\'zx125\',love:\'wl125\'}],
   }

渲染

  <view>{{name}}</view>
  
  #可拼接
  <view>{{num1}}+{{num2}}</view>
  
  #可计算
  <view>{{num1+num2}}</view>
  
  #布尔的使用,使用bool要加{{}}
  <checkbox checked=\'{{bool}}\'></checkbox>
  <checkbox checked=\'{{false}}\'></checkbox>
  
  #默认
  #关于wx:key
  #官方解释:当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排      序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
  <view wx:for="{{lis}}" wx:key="{{index}}">
    {{index}}-{{item.name}}-love-{{item.love}}
  </view>
  
  #自定义
  <view wx:for="{{lis}}" wx:for-item=\'zx\' wx:for-index=\'in\' wx:key="{{index}}">
    {{in}}-{{zx.name}}-love-{{zx.love}}
  </view>
  
  #无标签
  <block wx:for="{{lis}}" wx:key="{{index}}">
    {{index}}-{{item.name}}-love-{{item.love}}
  </block>
  
####################结果
<view>zx</view>
<view>100+200</view>
<view>300</view>
<checkboxrole="checkbox"aria-disabled="false"aria-checked="false"></checkbox>
<view> 0-zx-love-wl </view>
<view> 1-zx125-love-wl125 </view>
<view> 0-zx-love-wl </view>
<view> 1-zx125-love-wl125 </view>
0-zx-love-wl 1-zx125-love-wl125

小程序的宿主环境

我们称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能。

双线程模型-渲染层和逻辑层

首先,我们来简单了解下小程序的运行环境。小程序的运行环境分成渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发,小程序的通信模型下图所示。

一次界面展示的过程

渲染层加载虚拟DOM,逻辑层获取数据,和虚拟DOM合并,最后展示给用户

数据驱动

小程序也是基于数据驱动的,当数据改变,逻辑层会计算出改变的值,更新到虚拟dom上,这个过程虚拟DOM不用变化

生命周期

app的生命周期

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: \'I am global data\'
})


onLaunch(Object object)
小程序初始化完成时触发,全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。

参数:与 wx.getLaunchOptionsSync 一致

onShow(Object object)
小程序启动,或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。

参数:与 wx.onAppShow 一致

onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。

onError(String error)
小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。

参数:与 wx.onError 一致

onPageNotFound(Object object)
基础库 1.9.90 开始支持,低版本需做兼容处理。

小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。

参数:与 wx.onPageNotFound 一致

界面生命周期

注册界面

事件

事件说明

一个简单的事件案例

注意:

获取数据最好使用currentTarget这样肯定能获取当前标签的数据,而targent获取的是点击的标签的数据

事件改变data值

  jia:function(){
    var that=this
    that.setData({
      start:that.data.start+1
    })
  },

事件捕获和冒泡

规则:事件由外向内,冒泡由内向外,直到阻止事件,阻止事件也执行,后面的不执行

#事件捕获
capture-bind:tap=\'\'

#事件冒泡
bindtap=\'\'

#事件捕获
capture-catch:tap=\'\'
catchtap=\'\'

组件

自定义组件

1.json

{
	"component": true
}

2.wxml

<view class=\'inner\'>子组件{{haha}}</view>

3.js

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    inner: {
      type: String,
      //默认值
      value: \'default value\',
    }
  },
  data: {
  	//这里直接赋值的话,界面是无法传值改变的
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
      jia:function(e){
      console.log(e)
      //组件事件传递,界面绑定tt1,第二为传递参数,值在界面函数的e.detail
      this.triggerEvent("tt1", { age:e.currentTarget.dataset.age }, {})

    }
  }
})
使用自定

界面使用+传值

<zx haha="wl" bind:tt1="jia"></zx> 也可以传参给组件{{data}}

组件事件传递

路由跳转

路由

部分路由跳转可以传递参数,记得可以在声明周期函数获取传递的参数

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad, onShow
打开新页面 调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/>保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈
最多十层
onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/>关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack"> 用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab,跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 各种情况请参考下表
重启动 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/>关闭所有页面,打开到应用内的某个页面 onUnload onLoad, onShow

数据缓存

缓存:注意有同步异步之分,一般使用同步

单个Key允许存储最大数据为1MB,所有上限为10MB

wx.setStorage({
  key:"key",
  data:"value"
})

try {
  wx.setStorageSync(\'key\', \'value\')
} catch (e) { }

wx.getStorage({
  key: \'key\',
  success (res) {
    console.log(res.data)
  }
})

try {
  var value = wx.getStorageSync(\'key\')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

wx.removeStorage({
  key: \'key\',
  success (res) {
    console.log(res)
  }
})

try {
  wx.removeStorageSync(\'key\')
} catch (e) {
  // Do something when catch error
}

网络请求

请求

wx.request({
  url: \'test.php\', //仅为示例,并非真实的接口地址
  data: {
    x: \'\',
    y: \'\'
  },
  header: {
    \'content-type\': \'application/json\' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

参考链接

小程序和app和h5的区别

https://blog.csdn.net/freekiteyu/article/details/84316183

全套

https://www.cnblogs.com/xiaoyuanqujing/p/11638060.html

以上是关于微信小程序起步的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序起步

微信小程序视图层WXML_模板

7-微信小程序 模板(template)

vscode 开发微信小程序环境配置

微信图像采集小程序照片制作要多久

微信小程序云开发入门到发布上线