微信小程序简单教程

sitemap配置

微信里的配置文件
项目的导航配置文件
方便微信收录

project.config.json 文件

配置项目的功能和信息
使用的一些组件

wxss文件

配置页面css样式

app里定义一些全局的css样式

json 文件

全局的公共的配置文件 ,配置小程序的路由和窗口样式

pages 路由

放置一些写好的页面

app.json是全局的配置文件

window 视窗

navigationBarBackgroundColor 视窗的颜色

navigationBarTitleText视窗的文字

navigationBarTextStyle 视窗的颜色

js 文件

小程序的逻辑处理文件

util.js放置一些小工具

自己封装的常用的js插件

渲染

组件

表单组件

switch开关选择器

<switch></switch>

WXML语法

1.页面配置

每一个小程序的页面可以使用.json文件来对本页面的窗口配置
页面的配置会覆盖app.json的window中相同的配置

{
  "navigationBarBackgroundColor": "#f0f",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "导航栏里的文字",
  "backgroundColor":"#eee",
  "backgroundTextStyle": "light"
}

2.数据渲染

使用双大括号形式渲染{{con}}
绑定也可以使用双大括号

<view class='{{name}}'></view>

在双大括号内可以写js代码

<checkbox checked="{{false}}"></checkbox>
<checkbox></checkbox>

hidden

相当于Vue里面的v-show
在属性里面添加display:none

<view hidden='{{ifShow?true:false}}'></view>
Page({
    data:{
		ifShow:true
    }
})

if

相当于Vue里面的v-if
直接在Dom树种移除了

<view wx:if='{{true}}'></view>

if语法里有else

elif

<view wx:if='20 >= 22'>显示第一个</view>
<view wx:elif='20 >= 21'>显示第二个</view>
<view wx:else='20 >= 2'>显示最后一个</view>

for

循环渲染标签
类似于Vue

<view wx:for='{{arr}}' wx:key='index'>{{index}} |{{item.name}}</view>

在微信小程序里默认有item和index
如果要想改 ,使用wx:for-itme或wx:for-index

<view wx:for='{{arr}}' wx:for-item='value' wx:for-index='i' wx:key='*this'></view>

fou里的语法*this代表的数组里的每一项
index是数组的下标
item是当前项
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态使用wx:key

wx:key

进行for循环的时候要绑定一个key来保证数据的唯一性
当数据改变触发渲染层重新渲染的时候 ,会校正带有key的组件, 框架会确保他们被重新排序, 而不从新创建, 以确保组件保持自身的状态, 并提高列表渲染是的效率

标签

<view></view>类似html里的div
<text>文字标签</text>
<checkbox>按钮</checkbox>

事件函数

在标签里绑定的事件函数写在page里面

<button bindtap='goudan'>按钮</button>

Page({
    data: {},
    goudan(){
        console.log(111)
    }
})

动态更新数据

在微信小程序里面如果动态的更新了数据是不会自动发生变化的需要执行一个函数
this.estData({})函数里面是一个对象，标示的你要更新的值

Page({
    data:{
        list:[1,2,3]
    },
    goudan(){
        let list = this.data.list
        list.push(9)
        this.setData({
            list:list
        })//
    }
})

3.模板

微信小程序也和vue一样可以模块化开发

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如:

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

WXSS语法

自适应宽高单位用rpx

生命周期函数

监听页面加载

onLoad(){
    //
}

监听页面初次渲染完成

onReady(){
    //
}

监听页面显示

onShow(){
    //
}

监听页面隐藏

onHide(){
    //
}

监听页面卸载

onUnload(){
    //
}

页面事件处理函数

监听用户下拉

onPullDownRefresh(){}

监听用户上拉触底

onReachBottom(){}

用户点击右上角分享

onShareAppMessage(){}