微信小程序入门

官网：https://mp.weixin.qq.com/

image.png

下一步

image.png

注册完毕后 直接登陆即可

image.png

点击普通小程序开发者工具下载
网址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
安装完毕后 打开开发者工具 后微信扫码登陆

image.png

获取APPID ：

image.png

打开小程序后 编辑器是这样的

image.png

                                                 基本语法介绍

js定义数组
//index.js
//获取应用实例
const app = getApp()

Page({
data: {
teacher: [{
name: '黄哥',
age: '27'
}, {
name: '贾哥',
age: '25'
}, {
name: '邵哥',
age: '23'
}]
}
})

wxml 里面使用wx:for循环

{{haha.name}} ---- {{haha.age}}


wx:for 循环 默认是 item项 可以使用 wx:for-item 更改 默认item 的名字

wx:if 显示或隐藏一个 标签

里面可以写任何合法的表达式 为true 显示 false 隐藏

哈哈
点击

hidden显示或隐藏一个 标签

点击

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
同样为true 隐藏

放置 一个按钮 点击按钮的时候 让 哈哈显示 或隐藏

哈哈
点击

const app = getApp()

Page({
data: {
isShowHaha:true
},
haha(){
this.setData({
isShowHaha: !this.data.isShowHaha
})
}
})
bindtap 是点击事件 在js里面 没有methods 这样的 东西 直接写在data下面就行了

语法大概就介绍到这里。详细请看微信小程序官网！

                                              app.json 的window配置项

网址： https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
底部导航栏

"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "img/icon/home.png",
"selectedIconPath": "img/icon/home_cur.png"
},{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "img/icon/home.png",
"selectedIconPath": "img/icon/home_cur.png"
}]
}
tabBar 里面的 list 最多5项
pagePath 页面路径
text 文本显示
iconPath 默认显示图标
selectedIconPath 当前页面的图标
详细 文档 网址 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?search-input=

                                           小程序的生命周期

小程序的生命周期 在生成页面的时候 自动写在了 相应 页面的 js 里面
/**

• 生命周期函数--监听页面加载
  /
  onLoad: function (options) {
  类似 vue created
  },
  /*

  • 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
    类似 vue mounted
    },

  /**

  • 生命周期函数--监听页面显示
    */
    onShow: function () {
    类似 vue activated
    },

  /**

  • 生命周期函数--监听页面隐藏
    */
    onHide: function () {
    类似 vue deactivated
    },

  /**

  • 生命周期函数--监听页面卸载
    */
    onUnload: function () {
    类似 vue destroyed
    },

  /**

  • 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {

  },

  /**

  • 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {

  },

  /**

  • 用户点击右上角分享
    */
    onShareAppMessage: function () {

  }

                                         微信小程序里面的 rpx 单位

网址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

微信小程序入门就介绍到这里，头次写文章，可能不太详细。如果对小程序开发有意向的可以去官网看看