微信小程序入门篇

微信小程序入门篇

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

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

• 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"
      }
     ],
  },
})

小程序的api

• 官网

路由的跳转

• wx.redirectTo( { url: “/pages/页面路径” })

   wx.redirectTo({
     url: '/pages/center/index',
   })

弹窗提示

    wx.showToast({
      title: '数据更新完成',
    })