微信小程序入门篇

下载微信小程序编辑器：链接

微信小程序文件目录介绍基础篇

page的页面
- index主页
  - index.wxml 写html文件
  - index.wxss 写css文件
  - index.js 写js文件(data数据、生命周期函数等处理)
  - index.json 当前页面的配置文件(配置当前文件的titile等)
    - "navigationBarTitleText": "测试title"

视图容器的介绍基础篇

view 类似于div标签
text 类似于span标签

样式介绍基础篇

在这里插入图片描述

index.wxml 文件

<view class="bg1">微信</view>
<view>
 <!-- 使用index.js 的数据-->
  我是微信2 之 {{ name }}
  <text style="color:#ff5">我是text1</text><text>我是text1</text> 
</view>

index.wxss 文件

.bg1 {
  background: pink;
}

index.js 文件

Page({
  /**
   * 页面的初始数据
   */
  data: {
    name:"xzl"
  },
 })

组件介绍基础篇

组件

<button plain type="warn" size="mini">按钮</button>
<button disabled  size="mini">禁用按钮</button>
<button loading type="primary" size="mini">加载按钮</button>

小程序配置基础篇

配置
navigationBarTitleText 配置当前页面的title

index.json 文件
{
  "usingComponents": {},
  
  "navigationBarTitleText": "测试title"
}

生命周期函数篇

应用的生命周期 App.js

onLaunch
- 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow
- 当小程序启动，或从后台进入前台显示，会触发 onShow
onHide
- 当小程序从前台进入后台，会触发 onHide
onError
- 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

App({
  onLaunch: function () {
    console.log('app onLaunch');
  },
  onShow: function (options) {
    console.log("app onShow");
  },
  onHide: function () {
    console.log("app onHide");
  },
  onError: function (msg) {
    console.log("app onError");
  }
})

页面之中的生命周期函数 eg:index.js

data
- 页面的data数据
onLoad
- 页面一加载的时候触发
onReady
- 监听页面初次渲染完成(页面先加载-显示-最后渲染)
onShow
- 监听页面显示
onHide
- 监听页面隐藏(在切后台时，先触发页面的onHide，之后再隐藏app的onHide)
onUnload
- 监听页面卸载（就是从一个页面跳转到另外页面的时候触发）

注意点：生命周期执行顺序

编译的时候
- 先触发 app 的 - onLaunch函数（应用的初始函数）
- app 的 onShow函数（应用的显示函数）
- page 的 onLoad函数（页面加载函数）
- page 的 onShow函数（页面显示函数）
- page 的 onReady函数（页面初步渲染完成函数）
切换后台的时候（从页面切换后台时候如下）
- 先触发 page - onHide函数（页面隐藏函数）
- 再触发 app- onHide函数（应用隐藏函数）
后台切换页面时（从后台切换页面时候如下）
- 先触发 app- onShow函数（应用显示函数）
- 再触发 page- onShow函数（页面显示函数）
事件：
- onPullDownRefresh
  - 监听用户下拉动作
- onShareAppMessage
  - 用户点击右上角分享

Page({
  data: {
    name:"xzl"
  },
  onLoad: function (options) {
    console.log("page onLoad");
  },
  onReady: function () {
    console.log("page onReady");
  },
  onShow: function () {
    console.log("page onShow");
  },
  onHide: function () {
    console.log("page onHide");
  },
  onUnload: function () {
    console.log("page onUnload");
  },
  onPullDownRefresh: function () {
  },
  onShareAppMessage: function () {
  }
})

如何创建新的页面

再app.json文件之中创建即可
- 假如你要创建center页面
  - 那么就再page下面新增 "pages/center/index"即可！

{
  "pages":[
    "pages/index/index",
    "pages/center/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

小程序的模板语法

data数据的使用与修改

在indx.js文件之中定义data数据
在index.wxml之中使用data数据
- <view> {{ name }} </view>

在index.js文件的onLoad函数中修改 ->

  onLoad: function (options) {
    console.log("page onLoad");
    this.setData({
      name:'xxzzll'
    })
  },

Page({
  data: {
    name:"xzl",
  },
})

wx:if 与 wx:else的使用

block为空标签不渲染当前dom元素

<block wx:if="{{flag}}">
<view>{{ flag }}</view>
</block>
<view wx:else="{{flag}}">{{ flag}}</view>

wx:for列表循环

index.wxml

<view wx:for="{{ list}}" wx:key="index">
  <view>{{item.name}} -- {{index }}</view>
</view>

index.js

Page({
  data: {
    list:[
      {
        name:"ppp"
      },
      {
        name:"www"
      },
      {
        name:"ccc"
      }
     ],
  },
})