小程序入门级教程-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序入门级教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

关于小程序

小程序的定义

小程序，这里主要说的是微信小程序，微信小程序是在16年推出的，同样的，微信小程序的竞品也有很多，比如：支付宝小程序，钉钉，美团，头条，抖音，qq小程序等等

小程序的优点

可以实现自由分享
不用下载app也可使用
能快速的开发，使用微信接口

面向对象

小程序是面向大众的，针对开发者来说，内存、源码、图片、存储、接口与数据都有限制，这就需要通过小程序来进行一系列的控制

准备工作

第一步：下载微信小程序开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
第二步：注册一个微信小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1

这样准备工作就算完成了。

使用微信小程序

创建一个小程序项目
页面分布
导航栏解释（项目组成）
配置（特别注意）
app.json解释
创建一个home页面（选中pages文件夹，右键新建文件夹home，h选中home文件夹，右键新建page，命名home）

这里注意：app.json里的pages里，那个在第一行，就会显示那个页面的内容
json要求语法严格，不能有多余的逗号

页面组件

home.js：业务逻辑（写js的地方）
home.json：页面配置（配置项都写在这里）
home.wxml：模板文件（可以理解为写html的地方）
home.wxss：样式（写css样式的地方）
注意：在wxss文件内写css与普通的css有一点点不一样，默认单位是rpx，750rpx等于一个屏幕的宽，375rpx就是50%的宽

内置组件

< view></ view>（块组件）
< text></ text>（行内组件）
button组件（按钮）
input组件（表单）

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

1、文本渲染

渲染文本数据的时候要用双大括号包着数据，例：{{msg}}（msg是自定义的数据）
可以执行简单的js表达式

<view>{{msg.length}}</view>
<view>{{5+5}}</view>
<view class="title">{{msg.length>4?"大于":"小于"}}</view>

2、条件渲染

wx:if=“”
wx:elif=“”
wx:else=“”

<view wx:if="{{isLog}}">欢迎您</view>
<view >请先登录</view>

多重条件渲染

<view wx:if="{{score>=90}}">🚗小汽车</view>
<view wx:elif="{{score>=80}}">🛵摩托车</view>
<view wx:elif="{{score>=70}}">🚲单车</view>
<view wx:elif="{{score>=60}}">🛴滑板车</view>
<view wx:else>打一顿</view>

用法与vue中的v-if、v-else-if、v-else用法一样

`3、列表渲染

wx:for=“{{list}}”
wx:key=“index”
渲染数据：{{item}} {{index}}

<view wx:for="{{list}}" wx:key="index">
  {{index+1}}、{{item}}
</view>

4、自定义列表渲染

wx:for=“{{list}}”
wx:key=“index”
定义item与index的名称：wx:for-item=“mylist” wx:for-index=“myidx”
渲染数据：{{myidx+1}}、{{mylist}}

<view wx:for="{{list}}" wx:key="index" wx:for-item="mylist" wx:for-index="myidx">
  {{myidx+1}}、{{mylist}}
</view>

5、模板渲染（用的比较少）

1️⃣ import：只能导入template内容

template/utils.wxml

<template name="userCart">
	<view>用户名：{{name}}</view>
	<view>年龄：{{age}}</view>
</template>

home.wxml

<import src="/template/utils.wxml"></import>
<template data="{{...u1}}" is="userCart"></template>
<template data="{{...u2}}" is="userCart"></template>

2️⃣include：只能导入非template的内容

template/foot.wxml

<view>{{内容}}</view>

home.wxml

<include src="/template/foot.wxml"></include>

关于事件

绑定事件

bindinput：绑定表单输入时的事件
bindconfirm：绑定表单确认时的事件
bindtap：绑定点击时的事件

事件的传参

wxml中：

<button type="primary" bindtap="sayHi" data-msg="中国">事件传参1</button>
<button type="warn" bindtap="sayHi" data-msg="家乡">事件传参2</button>

js中定义方法：

sayHi(e){
    console.log(e);
    var msg = e.target.dataset.msg;
    wx.showToast({
      title: '你好'+msg,
    })
  },

❗❗❗获取事件的参数e.target.dataset.msg（重点）

表单的绑定

wxml中：

<input value="{{s1}}" bindinput="inputHd"/>

js中定义方法：

inputHd(e){
    //获取表单的值
    var s1 = e.detail.value;
    //更新data的值与视图
    this.setData({s1});//简写
    // this.setData({s1:s1})
  },

❗❗❗表单的值的获取：e.detail.value

内置的api

showToast：显示提示
wx.setStorageSync(‘key’, value)：本地存储
wx.getStorageSync(‘list’)：本地取
wx.request：网络请求
this.setData({s1})：更新数据与视图

关于页面的配置

“backgroundTextStyle”: “dark”,背景文字颜色
“backgroundColor”: “#42A5F5”,背景颜色
“enablePullDownRefresh”: true,允许下拉刷新
“usingComponents”:组件

关于小程序的一些限制

源文件大小：每个包大小不能超过2M、总共不能超过16-20M
页面缓存堆栈5层
底部栏：最少2个，最多5个、底部栏图片31K
本地存储：一次最多100M
seyData：不能超过1M
功能和微信保持一致：右上角胶囊按钮、下拉刷新…

小程序的页面跳转

1、组件跳转（< navigator>）
url跳转的地址、open-type（打开类型）

navigate：普通跳转
navigateBack：返回
redirect：重定向
switchTab：导航栏
reLaunch：重启

<view>
  <navigator url="/pages/event/event?name=wzy&age=18" open-type="navigate">事件event</navigator>
</view>
<view>
  <navigator url="/pages/event/event?name=王振愉&age=23" open-type="redirect">重定向</navigator>
</view>
<view>
  <navigator open-type="reLaunch">重启</navigator>
</view>
<view>
  <navigator open-type="navigateBack">返回</navigator>
</view>

2、api跳转

wx.navigateTo：跳转
wx.switchTab：切换底部栏
wx.redirect：重定向
wx.reLaunch：重启.

<button size="mini" type="primary" data-type="navigate" bindtap="goEvent">跳转到event</button>
<button size="mini" type="warn" data-type="redirect" bindtap="goEvent">跳转到event(替换)</button>

goEvent(e){
    //获取传递的参数type
    var type = e.target.dataset.type;
    // 如果type的值是redirect 替换跳转
    if(type=="redirect"){
      wx.redirectTo({
        url: '/pages/event/event',
      })
    }else{
      //否则就普通跳转
      wx.navigateTo({
        url: '/pages/event/event',
      })
    }
  },

页面栈

A页面 B页面 C页面 D页面 E页面
通过open-type=“navigate”页面会缓存起来，最多缓存5层
A页面—redirectB页面，A页面是不会被缓存
E页面“navigateBack”到D页面，页面的缓存清除一次
总结：
1、 navigate：会增加一层自动缓存
2、 redirect：会替换一层缓存页面
3、 navigateBack ：会移除一层缓存页面