微信小程序使用方法

一.在网页注册小程序账号(在未注册的情况下)

1.如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 "立即注册" 按钮进行注册。我们选择 "小程序" 即可。

接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。

激活邮箱之后,选择主体类型为 "个人类型",并按要求登记主体信息。主体信息提交后不可修改,该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体,在后续开通其他业务功能时不得变更或者修改。

二,微信开发者工具

1.下载微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装即可。

2.在进入小程序后,将会呈现以下页面

3,项目组成

4.新建页面

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

页面配置:

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

三.基本语法

1.文本渲染

复制代码
{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2.条件渲染

html 复制代码
wx:if=""
wx:elif=""
wx:else

3.列表渲染

html 复制代码
wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}

4.自定义列表渲染

html 复制代码
定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

5.wxss

html 复制代码
默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽

6.事件

html 复制代码
bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

7.内置组件

html 复制代码
view         组件块组件
text         组件行内组件
button       组件按钮
input        组件表单

8.事件的传参

html 复制代码
<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

9.表单的绑定

html 复制代码
<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
 this.setData({s1:e.detail.value})
}
表单的值获取:e.detail.value

10.生命周期

html 复制代码
onLoad 							页面加载完毕
onPullDownRefresh 				下拉刷新
onReachBottom					 触底更新
相关推荐
inksci12 小时前
Js生成安全随机数
前端·微信小程序
azhou的代码园13 小时前
基于SpringBoot+微信小程序的图片识别科普系统
spring boot·后端·微信小程序
万岳科技系统开发19 小时前
外卖系统选型与源码与 SaaS 实践的思考
数据库·小程序
志遥21 小时前
我把 Sentry 接进了 7 端小程序:从异常捕获、Breadcrumb 到 Source Map 定位
微信小程序·监控
云起SAAS21 小时前
在线客服系统源码 | 支持PC管理端+H5访客端+实时聊天
微信小程序·ai编程·看广告变现轻·在线客服系统源码
bug总结1 天前
小程序云函数 vs 传统前后端分离(阿里云)原理解析
阿里云·小程序·云计算
2501_933907211 天前
如何通过上海本凡科技获得优质的小程序开发服务?
科技·微信小程序·小程序
计算机徐师兄1 天前
Java基于微信小程序的青少年科普教学系统【附源码、文档说明】
java·微信小程序·青少年科普教学系统小程序·java青少年科普教学小程序·青少年科普教学微信小程序·青少年科普教学小程序·科普教学微信小程序
a17798877121 天前
小程序上传图像失败
小程序·c#
花卷HJ2 天前
微信小程序国际化完整方案
微信小程序·小程序·notepad++