我是靠谱客的博主 谨慎战斗机,最近开发中收集的这篇文章主要介绍1.微信小程序的使用和基本介绍,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

微信小程序: mvvm+底层
用途: 微信公众号,微信订阅号,微信小游戏
编辑器:微信开发者工具。
步骤:准备 -> 开发 -> 审核 -> 交钱 -> 发布

一.开发前准备

1.申请微信公众号平台账号
https://mp.weixin.qq.com

2.添加开发者+项目组成员
管理 -> 成员管理

3.获取小程序id
通过小程序id创建项目
开发 -> 开发设置 -> 开发者id

4.安装微信开发者工具
文档 -> 工具 -> 微信开发者工具

5.登陆
选择的目录必须为空文件夹,demo01

二.目录结构组成

wxml:
基于html -> 更加类似于element-ui
封装了常用的html标签

wxss:
基于css
1.增加了相对单位rpx
2.只支持css中一部分常用选择器

js:
基于js:mvvm思想
只关心逻辑层

json(项目配置):

  • 全局配置:
    • app.json(根组件配置): pages,window
      project.config.json:es6, node_modeuls
  • 局部配置:
    • 子页面配置会自动覆盖全局页面配置

三.创建页面

home:
home.wxml
home.wxss:
home.js
home.json
子文件内的文件名称必须和文件夹名称一致(添加页面路径后会自动生成同名文件夹和子文件)。
在app.json文件内配置pages,默认第一个pages为首页

四.逻辑层和视图层

1.数据绑定

基本数据绑定:
js:设置data,初始化数据。
html: 用{{}}引用。

双向数据绑定:
基础库版本在2.8.3之后都可以使用双向数据绑定。
model:value="{{msg}}"

2.列表渲染

wx:for="{{arr}}"//默认情况下,每一个数组元素名称为item,下标index
wx:for-item=“it”//给数组项起名字
wx:for-index=“in”//给数组下标起名字
wx:key=""

3.条件渲染
wx:if
wx:elif
wx:else
block: 承载子元素,但是不被编译(类似template)

4.事件绑定

bindxxx:
xxx:type
支持事件冒泡
小程序没有浏览器,不支持bom事件类型;没有鼠标,不支持鼠标点击事件

catchxxx:
不支持事件冒泡

5.组件

单标签要在开始标签中进行关闭,或者添加一个结束标签

<input/>
<input></input>

最后

以上就是谨慎战斗机为你收集整理的1.微信小程序的使用和基本介绍的全部内容,希望文章能够帮你解决1.微信小程序的使用和基本介绍所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(60)

评论列表共有 0 条评论

立即
投稿
返回
顶部