微信小程序开发day01

本文主要介绍了微信小程序开发的基本流程

一. 小程序入门

1.注册

AppID : wx5f6a4e2b33dd5cef

https://mp.weixin.qq.com/

2.开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

3.代码文件构成

• app.json

  

• sitemap.json

  

4. 新建一个页面

在app.json中新增页面存放路径

修改首页页面，直接调整路径的顺序即可

5. wxml文件

类似web端html

• 标签不同

  div—>view

  span—>text

  img—>image

  a—>navigator

• 属性节点

  <a href="#"></a>
  
  <navigator url="#"></navigator>

• 类似于Vue的模板语法

  数据绑定 列表渲染 条件渲染

6.通信模型

通信主体

渲染层 —————— 逻辑层

wxml，wxss js脚本

7.组件

• 视图类

  • view 类似于div 块级元素

    实现flex横向布局

    <view class="container1">
        <view>A</view>
        <view>B</view>
        <view>C</view>
    </view>

    .container1 view{
        width:100px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
    .container1 view:nth-child(1){
    	background-color:lightgreen;
    }
    .container1 view:nth-child(2){
    	background-color:lightblue;
    }
    .container1 view:nth-child(3){
    	background-color:lightcoral;
    }
    .container1{
    	display:flex;
        justify-content:space-around;
    }

  • scroll-view 可滚动的视图区域

    

    <scroll-view class="container1" scroll-y>
        <!--scroll-y 允许纵向滚动  scroll-x 横向滚动-->
        <view>A</view>
        <view>B</view>
        <view>C</view>
    </scroll-view>

    .container1 view{
        width:100px;
        height:100px;
        text-align:center;
        line-height:100px;
    }
    .container1 view:nth-child(1){
    	background-color:lightgreen;
    }
    .container1 view:nth-child(2){
    	background-color:lightblue;
    }
    .container1 view:nth-child(3){
    	background-color:lightcoral;
    }
    .container1{
    	border:1px solid red;
        width:100px;
        height:120px;/*必须要给容器固定一个高度*/
    }

  • swiper和swiper-item 轮播图组件和轮播图item组件

    <swiper class="swiper-container" indicator-dots>
        <!-- indicator-dots显示面板指示点 -->
        <!-- autoplay 是否自动切换 -->
        <!-- interval 自动切换时间间隔 -->
        <!-- circular 是否自动衔接 -->
        <swiper-item>
        	<view class="item">第一项</view>
        </swiper-item>
        <swiper-item>
        	<view class="item">第二项</view>
        </swiper-item>
        <swiper-item>
        	<view class="item">第三项</view>
        </swiper-item>
    </swiper>

    .swiper-containter{
    	height:150px;
    }
    .item{
    	height:100%;
        line-height:150px;
        text-align:center;
    }
    swiper-item:nth-child(1) .item{
    	background-color:lightgreen;
    }
    swiper-item:nth-child(2) .item{
    	background-color:lightblue;
    }
    swiper-item:nth-child(3) .item{
    	background-color:lightcoral;
    }

• 基础内容组件

  • text

    属性：selectable 支持长按选中

  • rich-text

    把HTML字符串渲染为对应的UI结构

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

• 其他常用组件

  • button

    可以通过open-type属性调用微信提供的各种功能(客服，转发，获取用户授权，获取用户信息)

  • image

    默认宽300px 高度约为240px

  • navigator

    类似于html中的a标签

8.API

• 事件监听

  wx.onWindowResize(function callback) 监听窗口尺寸变化事件

• 同步api

  以Sync结尾的api

  wx.setStorageSync(‘key’,’value’) 向本地存储中写入内容

• 异步

  wx.request() 发起网络数据请求，通过success回调函数接收数据