展示
操作
相关知识
微信小程序
1.什么是微信小程序
标准的微信小程序是指使用微信自己开发的一套标签语言进行开发的项目,该标签语言分别对应着普通Web页面中的html,js,css等,展示在微信客户端的环境中。
因此真正的微信小程序在普通浏览器中是无法正常展示的,因为普通浏览器无法解析微信的标签语言;
2.微信小程序 & web项目
一个公众号中的网页,如果想在小程序中展示,另外开发一版感觉有点浪费资源,那么普通的 Web 开发是否展示在微信小程序中呢,这个是可以的,但是需要注意你的Web开发页面中是否存在web-view(微信浏览器)无法识别的代码,如果存在无法识别的代码,那么页面的展示可能存在问题;
但是如果你的 Web 页面能够在微信浏览器中正常展示,那么,就可以通过微信小程序的标签将 Web 项目嵌入微信小程序中,而不需要特意去开发标准版本的微信小程序,微信小程序嵌入 Web 页面的方式,
<web-view src="http://192.168.2.3:3000/#/submitpage"></web-view>
src属性为Web项目的域名或服务器地址
小程序开发工具
小程序官方网址
官方文档
开放社区
小程序项目目录
一个官方小程序目录
├── app.js ────────| ├── app.json 全局页面设置 ────────|小程序主体部分 ├── app.wxss ────────| | └── utils ────────|小程序公用方法部分 ├── pages ────────|小程序具体页面部分 │ │── index 一个小程序页面 │ │ ├── index.wxml │ │ ├── index.js │ │ ├── index.json 局部页面设置 │ │ └── index.wxss │ └── logs 一个小程序页面 │ ├── logs.wxml │ └── logs.js
小程序代码组成
json 页面配置,静态配置文件
wxml 页面结构,全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言
属性绑定: attr-name =“{{test}}” 双引号必需
逻辑: {{ 变量名 }}
条件:wx:if=“{{condition}}” wx:elif wx:else
循环: 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
wx:for=“{{array}}” 数组
wx:for-index=“idx” 索引
wx:for-item=“itemName” 当前项
wx:key=“unique” 指定列表中项目的唯一的标识符,为 item 中的字段属性,不能写成item.unique
大小写敏感
标签严格闭合
没有被定义的变量的或者是被设置为 undefined 的变量不会展示
wxss 页面样式表,全称是 WeiXin Style Sheets,是一套用于小程序的样式语言,用于描述WXML的组件样式
引用方式:@import url(’./test_0.css’)
引用方式:@import ‘./test_0.wxss’
WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会因为样式的引用而产生多余的文件请求。
js 页面逻辑,主要开发语言是 JavaScript