宿主环境.

以下仅为个人学习时所记录的笔记，仅供参考，如有错误恳请指正。

        宿主环境主要包含，一通信模型，二运行机制，三组件，四API。

        1.通信模型

        通信模型又分为渲染层和逻辑层，逻辑层包括wxml模板和wxss样式，渲染层包括js脚本，两者之间由微信客户端进行转发。        

        2.运行机制

        运行机制分为小程序启动的过程和打开页面的过程；小程序启动一共分为五步，一把小程序的代码包下载到本地，二解析APP. json全局配置文件，三执行APP. js小程序入口文件，调用APP（）创建小程序实例，四渲染小程序首页，五小程序启动完成；打开页面一共分为四步，一，加载解析页面的. json配置文件，二加载页面的. wxml模板和. wxss样式，三执行页面的. js文件调用page（）创建页面实例，四页面渲染完成。

        3.组件

        常用组件主要含有四类，一视图容器，二基础内容，三表单组件，四导航组件。

        视图容器组件主要包含三种，一view(类似div)，二scroll-view(可滚动的视图区域)，三swiper和swiper-item( 轮播图容器组件和轮播图item组件)。其具体演示代码如下：

例：实现view的横向排版

/*.wxml文件中*/
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
/*.wxss文件中*/
.container1 view{
  height: 100px;
  text-align: center;
  width: 100px;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightpink;
}
.container1 view:nth-child(3){
  background-color: grey;
}
.container1{
  display: flex;
  justify-content: space-around;/*横向上分散对齐*/
}

实现可上下滚动导航条

/*scroll-x横向滚动(必须在view中固定宽度) scroll-y纵向滚动(必须在view中固定高度)*/
/*.wxml文件中*/
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
/*.wxss文件中*/
.container1 view{
  height: 100px;
  text-align: center;
  width: 100px;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightpink;
}
.container1 view:nth-child(3){
  background-color: grey;
}
.container1{
height: 120px;
width: 100px;
}

实现轮播图

/*.wxml文件中*/
<!--indicator-dots 表示显示面板指示点 indicator-color指示点颜色 indicator-active-color当前颜色-->
<!-- autoplay自动播放 interval播放间隔（默认5000毫秒）circular衔接播放-->
<swiper class="container1" indicator-dots autoplay>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

/*.wxss文件中*/
swiper-item:nth-child(1){
  background-color: lightblue;
}
swiper-item:nth-child(2){
  background-color: lightpink;
}
swiper-item:nth-child(3){
  background-color: lightgreen;
}
.container1{
height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

        常用的基础内容组件分为一text(文本组件，类似于span标签)，二rich-test(富文本组件，支持把HTML字符串渲染为wxml结构)。

        例：利用text标签和selectable实现长按复制功能

<view>
<text selectable>于手机上长按此处即可复制</text>
</view>

        利用rich-text实现渲染功能（外层有双引号情况下内层需要用单引号）

<view>
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
</view>

        其他常用组件还有：一button（按钮组件，可通过open-type实现微信提供的一系列服务），二image（图片组件，控制插入图片的大小适应等），三navigator（导航组件，类似于HTML 中的a标签）

例：实现点击按钮进行data中count参数+1并在控制台输出

<!--在.wxml文件中-->
<!--button常用属性有type，size，plain（镂空）-->
<button type="primary" bindtap="tapHandler">+1</button>

<!--在二级页面.js文件中-->
Page({
  data: {
    count: 0
  },
tapHandler(e){
  this.setData({
    count:this.data.count +1
  })
  console.log(this.data.count)
}

实现于button中传递参数并点击使count与该参数相加（e指代当前所传递的事件，如果不明白可以先使用consol.log(e)进行查看）

<!--于.wxml文件中-->
<button type="primary" bindtap="tapHandler2" data-name="{{2}}">+2</button>

<!--于.js文件中-->
Page({
  data: {
    count: 0
  },
tapHandler2(e){
  this.setData({
    count:this.data.count + e.target.dataset.name
  })
  console.log(this.data.count)
}

插入图片示例

<!--mode属性常用的值：aspectFit（保持纵横比缩放图片），aspectFill（同上，但只保证短边可以显示出来），widthFix（宽度不变高度自适应变化），heightFix（高度不变，宽度自适应）-->
<image src="文件所在路径" mode="aspectFit"></image>

4.API

        API分为三类。一，事件监听类API(以on开头用来监听某些事件的触发)，二同步API(以Sync结尾的API都是同步API)，三异步API(需要通过success fail complete回调函数接收调用的结果)。