微信小程序入门

官网：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循环

<view>
<view wx:for="{{teacher}}" wx:for-item="haha">
<text>{{haha.name}} ---- {{haha.age}}</text>
</view>
</view>
wx:for 循环默认是 item项可以使用 wx:for-item 更改默认item 的名字

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

里面可以写任何合法的表达式为true 显示 false 隐藏
<view>
<view wx:if="{{isShowHaha}}">哈哈</view>
<button>点击</button>
</view>

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 作为视觉稿的标准。
注意：在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

微信小程序入门