微信小程序的开发

一、注册

注册一个小程序 地址
下载微信开发者工具地址

二、微信开发者工具的应用

模板语法

小程序的模板语法约等于vue的模本语法

view可以看作是div text可以看作是span

文本的渲染

<view>{
  {num}}</view>
<view>{
  {num+1}}</view><--可以做一些简单运算-->

条件渲染

wx:if=“” 同与vue中的v-if
wx:elif=“ ” 同与vue中的v-else-if
wx:else 同与vue中的v-else

列表渲染

wx:for=“{ {list}}” //等同于v-for
wx:key=“index” //等同于:key
{ {item}}
{ {index}}

自定义列表渲染

定义item与index的名称
wx:for=“{ {list}}}”
wx:for-item=“myitem” //定义item的名字为myitem
wx:for-index=“myidx” //定义index的名字为myidx
{ {myidx}}
{ {myitem}}

内置组件

• view组件
  块组件
• text 组件
  行内组件
• button组件
  按钮
• input组件
  表单

样式

• 默认单位是rpx
• 750rpx 等于一个屏幕的宽
• 375rpsx就是50%的宽

事件

1. bindInput

表单输入时

2. bindconfirm

表单输入确认

表单的绑定:表单的值获取：e.detail.value

3.bindtap

点击时候

内置的api

• showToast 显示提示
• wx.setStorageSync(key,value) 本地存储
• wx.getStorageSync(key) 本地取
• wx.request 网络请求

生命周期

• onLoad 页面加载完毕
• onPullDownRefresh 下拉刷新
• onReachBottom 触底更新

更新数据与视图

this.setData({
   k:v}) //k代表要更新的数据  v是更新的数据

页面配置

"enablePullDownRefresh": true,  //允许下拉刷新
"backgroundTextStyle": "dark",  //背景文字颜色
"backgroundColor":"#f70", //背景颜色
"usingComponents": {
   } //组件

跳转

tabBar

底部栏跳转 （app.json）

"tabBar": {
   
"color":