微信开发者小程序基础

人生不求满

已于 2023-04-20 21:46:59 修改

阅读量184

点赞数

分类专栏：微信小程序文章标签：小程序

于 2022-11-11 01:07:55 首次发布

本文链接：https://blog.csdn.net/m0_72967249/article/details/127798695

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

定义

微信里面的app，2016年推出的，

竞品：支付宝小程序，钉钉，美团，头条，抖音qq小程序

优点

在微信自由分享
不用下载app
能快速的开发，使用微信的api接口

开发者

内存，源码，图片，存储，接口与数据都有限制

网址

下载微信小程序开发工具：微信开发者工具下载地址与更新日志 | 微信开放文档
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
微信公众平台：微信公众平台
注册一个微信小程序
https://mp.weixin.qq.com/wxopen/waregister?action=step1

新建项目

界面介绍

项目组成

app.json

pages注册页面

window窗口信息

新建页面

在pages文件夹右键建立新的文件夹
在文件中右键新建页面
哪个page在最上面，默认显示哪页
json要求严格语法，不能有多余的注释和逗号

注意设置（勾选不校验合法域名）

页面组件pages/home

home.wxml 模板文件	home.js 业务逻辑
home.wxss 样式	home.json 页面配置

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

文本渲染
- 普通：{{msg}}
- 富文本：<rich-text nodes="{{富文本内容}}"></rich-text>
- 可以执行简单的js表达式
  - {{2+3}}简单的运算
  - {{msg.length}}文字的长度
条件渲染
- wx:if="{{条件}}" wx:elif="{{多重条件}}"
  其它条件：wx:else {{条件？真表达式：假表达式}}
  条件渲染：
  
  多重条件渲染：
列表渲染（循环）
- 循环遍历：字符串、数组、数字
- <view wx:for="{{列表}}" wx:key="index">{{index}} --{{item}}</view>
  - wx:for="{{list}}"
    当前被遍历的元素：{{item}}
    wx:key="index" 当前被遍历元素的下标{{index}}
遍历九九乘法表
```
<scroll-view scroll-x="true">
<view wx:for="{{10}}" wx:for-item="i" class="wrap">
<view class="row">
  <text wx:for="{{10}}" wx:for-item="j" wx:if="{{j>0&&j<=i}}" wx:key="j">
  {{j+"x"+i+"="+i*j}}
  </text>
</view>
</view>
</scroll-view>
```
自定义列表渲染
- 定义item与index的名称，wx:for-item="自定义项" wx:for-index="自定义下标"
- ```
<view wx:for="{{list}}"
wx:for-index="myindex"
wx:for-item="myitem">{{myindex+1}}-{{myitem}}</view>
```

导入（不常用）

import

只能导入template内容

template/utils.wxml

<template name="userCart">
  用户名：{{name}}
</temlate>

home.wxml

<import src="/template/utils.wxml">

<tempate is="userCart" data="{{...u1}}">

include
- 只能导入非template内容
- template/foot.wxml
  - ```
  <view>{{内容}}</view>
```
- home.wxml
  - ```
  <include src="/template/foot.wxml">
```

内置组件

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

wxss样式

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

事件

bindInput 表单输入时	bindcomfirm 表单输入确认(回车)
bindtap 点击时候	bindchange发生变化

事件响应：<view bindtap="say"></view>

事件的传参

1、<button data-msg="被传递的参数" bindtap="tapHd">
- 获取事件的参数 e.target.dataset.msg
2、<button bindtap="say" data-str="被传递的参数"></button>
say(e){let str = e.target.dataset.str || '你好啊' wx.showToast({title:str})}

表单的绑定

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

inputHd(e){
   this.setData({s1:e.detail.value})
}

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

表单的双向绑定

//xxx.wxml文件
<view class="title" >表单双向绑定</view>
<input type="text" placeholder="请输入内容" model:value="{{msg}}" bindinput="inputHd"/>
<view>{{msg}}</view>


//xxx.js文件
  inputHd(e){
    var val= e.detail.value;
  },

内置的api

显示提示：wx.showToast(title,icon)
本地存储：wx.setStorageSync(key,value)
本地取：wx.getStorageSync(key)
网络请求：wx.request ({url,method,success,fail})

生命周期

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

页面配置

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

wxs语法

<wxs module="fn" src="xxx.wxs">module.exports={filter:function(){}}</wxs>
{{fn.filter(list,true)}}

小程序的限制

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

小程序的页面的跳转

组件跳转<navigator>
- url 跳转的地址
- open-type 打开类型
  - navigate 普通跳转 navigateBack 返回
    redirect 重定向 switchTab 跳转底部栏
    reLaunch 重启
api跳转
- wx.navigateTo 跳转 wx.switchTab 切换底部栏
  wx.redirect 重定向 wx.reLaunch 重启