微信小程序使用方法

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

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					 触底更新
相关推荐
FinClip14 小时前
微信AI小程序“亿元计划”来了!你的APP如何一键接入,抢先变现?
前端·微信小程序·app
菜鸟学习成功之路-李飞17 小时前
免费开源一款作文批改小程序模版,下载即可二开
小程序·开源
说私域17 小时前
电商价格战下的创新破局:定制开发开源AI智能名片S2B2C商城小程序的应用与价值
人工智能·小程序·开源
week_泽17 小时前
小程序云函数全面总结笔记_5
笔记·小程序
说私域18 小时前
融合“开源链动2+1模式AI智能名片S2B2C商城小程序”:同城自媒体赋能商家私域流量增长的新路径
人工智能·小程序·开源
计算机毕设指导618 小时前
基于微信小程序的考研资源共享系统【源码文末联系】
java·spring boot·后端·考研·微信小程序·小程序·maven
week_泽19 小时前
小程序云数据库增加操作_3
数据库·小程序
沉默-_-19 小时前
从小程序前端到Spring后端:新手上路必须理清的核心概念图
java·前端·后端·spring·微信小程序
week_泽19 小时前
百战商城商品数据云函数化改造总结_百战_3
数据库·笔记·微信小程序·小程序
『 时光荏苒 』20 小时前
微信小程序we分析如何采集webview的体验信息
微信小程序·小程序·webview·we分析