小程序|微信小程序入门篇小程序|微信小程序

微信小程序入门篇
- 微信小程序文件目录介绍基础篇
- 视图容器的介绍基础篇
- 样式介绍基础篇
- 组件介绍基础篇
- 小程序配置基础篇
- 生命周期函数篇
- 应用的生命周期 App.js
- - 页面之中的生命周期函数 eg:index.js
- 如何创建新的页面
小程序的模板语法
- data数据的使用与修改
- wx:if 与 wx:else的使用
- wx:for列表循环
- 小程序的api
- - 路由的跳转
  - 弹窗提示

微信小程序入门篇

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

文章图片

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

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

视图容器的介绍基础篇

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

文章图片

样式介绍基础篇

文章图片

index.wxml 文件

微信我是微信2 之 {{ name }} 我是text1我是text1

index.wxss 文件

.bg1 { background: pink; }

index.js 文件

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

组件介绍基础篇

组件

小程序配置基础篇

配置
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数据
- {{ name }}
在index.js文件的onLoad函数中修改 ->
onLoad: function (options) { console.log("page onLoad"); this.setData({ name:'xxzzll' }) },