【微信小程序】微信小程序开发学习记录
环境准备
注册账号
访问注册页面注册⻚⾯，完成注册（建议使用新邮箱）。
获取APPID
登录微信小程序，找到开发、开发设置获取APPID。
开发工具
下载地址
第一个微信小程序
打开开发者工具
登录需要扫码登录
新建项目
填写项目信息，复制获取的AppID,后端服务暂时选择不使用云服务。
开发工具
开发工具介绍
结构目录
⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服务。
文件结构与传统web对比
- 传统web:
- 结构 HTML
- 样式 CSS
- 逻辑 Javascript
- 配置 ⽆
- 微信⼩程序
- 结构 HTML
- 样式 WXSS
- 逻辑 Javascript
- 配置 JSON
基本目录结构
- pages ：页面文件夹
- index ：首页文件夹
- index.js ：逻辑文件
- index.json ：配置文件
- index.wxml ：配置文件
- index.wxss ：样式文件
- index ：首页文件夹
- logs ：日志页面
- logs.js
- logs.json
- logs.wxml
- logs.wxss
- utils ：第三方工具js文件夹
- util.js
- app.js ：项目的全局入口文件
- app.json ：全局配置文件
- app.wxss ：全局样式文件
- project.config.json ：项目配置文件 AppID
- sitemap.json ：微信索引配置文件
配置文件
配置文件不能出现注释
全局配置文件 app.json
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
完整配置项说明请参考小程序全局配置
以下是一个包含了部分常用配置选项的 app.json ：
{"pages": ["pages/index/index","pages/logs/index"],"window": {"navigationBarTitleText": "Demo","backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"}, {"pagePath": "pages/logs/index","text": "日志"}]},"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": true,"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
页面配置 page.json
这⾥的page.json其实⽤来表⽰⻚⾯⽬录下的page.json这类和⼩程序⻚⾯相关的配置。开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json 的 window 中相同的配置项。
完整配置项说明请参考小程序页面配置
sitemap 配置
通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。需要注意的是，若小程序爬虫发现的页面数据和真实用户的呈现不一致，那么该页面将不会进入索引中。sitemap
模板语法
WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。
数据绑定
普通写法
<view>{{name}}</view>
Page({data:{name:'丽丝'}
})
组件属性
<view id="item-{{id}}"></view>
Page({data:{id:0}
})
bool类型
不要直接写checked="false"，其计算结果是⼀个字符串
<checkbox checked="{{false}}"></checkbox>
运算
三元运算
<view hidden="{{ flag ? true : false }}"></view>
<view>{{10%2===0 ? '偶数' : '奇数'}}
</view>
算术运算
<view>{{a+b}}+{{c}}+d
</view>
Page({data:{a:1,b:3,c:5}
})
逻辑判断
<view wx:if="{{length > 5}}"></view>
字符串运算
<view>{{"hello" + name}}</view>
列表渲染(遍历)
wx:for
项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名
wx:key ⽤来提⾼数组渲染的性能
wx:key绑定的值有如下选择:
string类型,表⽰循环项中的唯⼀属性- 保留字
*this,它的意思是item本⾝，*this代表的必须是唯⼀的字符串和数组。
<view><view wx:for="{{ list }}" wx:for-item="item" wx:for-index="index" wx:key="id">索引：{{ index }}--值：{{ item.name }}</view>
</view>
<view><view>对象循环</view><view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age">属性：{{key}}--值：{{value}}</view>
</view>
block
渲染⼀个包含多节点的结构块?block最终不会变成真正的dom元素
<view><view>对象循环</view><block wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age" class="my_list">属性：{{key}}--值：{{value}}</block>
</view>
条件渲染
wx:if
使用wx:if="{{condtion}}"判断是否需要渲染代码块。
<view>条件渲染</view><view wx:if="{{true}}">显示</view><view wx:if="{{false}}">隐藏</view><view wx:if="{{true}}">1</view><view wx:elif="{{false}}">2</view><view wx:else>3</view>
hidden
<view hidden="{{condition}}"> True </view>
频繁切换使用 hidden,不频繁则 wx:if
事件的绑定
- wxml页面
<view>输入：
<input type="text" bindinput="handleInput"/>
</view>
<view>{{num}}
</view>
- js page
Page({/*** 页面的初始数据*/data: {num:0},// 输入框测试handleInput(e){this.setData({num:e.detail.value});console.log(e.detail.value);},
})
事件传值通过标签⾃定义属性的⽅式和 value
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>{{num}}
</view>
// 加减handletap(e){const nums = e.currentTarget.dataset.operation;this.setData({num:this.data.num += nums})},
样式 WXSS
WXSS(WeiXin Style Sheets)是⼀套样式语⾔，⽤于描述 WXML的组件样式。
与CSS相⽐，WXSS扩展的特性有：
- 响应式⻓度单位 rpx
- 样式导⼊
尺寸单位
尺寸单位
- rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。
样式导⼊
wxss中直接就⽀持，样式导⼊功能。也可以和less中的导⼊混⽤。使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。
/** common.wxss **/
view{background-color: rgb(235, 235, 235);
}
.userinfo {display: flex;flex-direction: column;align-items: center;
}
.userinfo-avatar {width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%;
}
/**index.wxss**/
@import "../../styles/common.wxss";
选择器
目前支持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class |
.intro
|
选择所有拥有 class=“intro” 的组件 |
| #id |
#firstname
|
选择拥有 id=“firstname” 的组件 |
| element |
view
|
选择所有 view 组件 |
| element, element |
view, checkbox
|
选择所有文档的 view 组件和所有的 checkbox 组件 |
| ::after |
view::after
|
在 view 组件后边插入内容 |
| ::before |
view::before
|
在 view 组件前边插入内容 |
常见组件
微信开发文档
<!-- text -->
<text user-select decode>text 123</text>
<!-- images -->
<view class="img"><image mode="widthFix" lazy-load src="https://konachan.net/sample/417260b75396b82c6206e044a50e4cc9/Konachan.com%20-%20318761%20sample.jpg"></image>
</view>
<!-- swiper 轮播图 -->
<swiper autoplay="true" interval="1500" circular="true" indicator-dots="true" indicator-color="#0094ff" indicator-active-color="#ff0094"><swiper-item><image mode="widthFix" lazy-load src="https://konachan.net/sample/417260b75396b82c6206e044a50e4cc9/Konachan.com%20-%20318761%20sample.jpg"></image></swiper-item><swiper-item><image mode="widthFix" lazy-load src="https://konachan.net/sample/417260b75396b82c6206e044a50e4cc9/Konachan.com%20-%20318761%20sample.jpg"></image></swiper-item><swiper-item><image mode="widthFix" lazy-load src="https://konachan.net/sample/417260b75396b82c6206e044a50e4cc9/Konachan.com%20-%20318761%20sample.jpg"></image></swiper-item>
</swiper>
<!-- navigator -->
<navigator hover-class="navigator-hover" url="/pages/logs/logs">log</navigator>
<!-- rich-text 标签字符串 -->
<rich-text nodes="{{html}}"></rich-text>
<!-- button -->
<button>默认按钮</button>
<button size="mini">迷你按钮</button>
<button type="primary">primary 按钮</button>
<button type="warn">warn按钮</button>
<button type="warn" plain>plain按钮</button>
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
<!-- 字体图标 -->
<view class="" hover-class="none" hover-stop-propagation="false"><icon type="success" size="23" color="red"></icon>
</view>
<!-- radio 单选框 -->
<radio-group bindchange="handleChange"><radio class="" color="red" value="male">男</radio><radio class="" color="red" value="female">女</radio>
</radio-group>
<view class="" hover-class="none" hover-stop-propagation="false">您选中的是：{{gender}}</view>
<!-- checkbox 多选框 -->
<checkbox-group bindchange="handleItemChange"><checkbox class="" value="{{item.value}}" wx:for="{{list}}" wx:key="id">{{item.name}}</checkbox>
</checkbox-group>
<view>选中的水果：{{checkdeList}}</view>// pages/search/search.js
Page({/*** 页面的初始数据*/data: {html: '<div><p>demo</p></div>',gender: '',list: [{id: 0,name: '
【微信小程序】微信小程序开发学习记录相关推荐
- 微信小游戏开发学习记录2
接上一篇:微信小游戏开发学习记录_寂静流年韶华舞的博客-CSDN博客_微信小游戏开发学习 目录 一.UI系统 1.基础渲染组件-精灵组件 (1)操作: (2)Sprite 属性 (3)渲染模式 2.L ...
- 微信小程序开发学习记录（一）：直播功能
微信小程序直播是最近上线的一个新功能,用了将近一天半的时间实现了用直播API去创建直播间,中间踩了很多坑(有的到现在也不是很明白为啥这样就可以 那样就不行),网上有关直播功能的参考文章也比较少,所以这 ...
- Android 开发学习记录（4）---- httpclient使用（三）
之前在Android 开发学习记录(3)---- httpclient使用(二)中介绍了如何使用httpclient访问需要账户登录的网址,当然首先是要有一个合法的登录账户. 但是现在好多网站在登录时 ...
- 微信小程序+java后台+云服务器开发学习记录
仅作为个人学习记录
- django实现证件照换底色后端和小程序（第三周学习记录）
第三周学习记录 继续上周的django后台搭建,经过讨论选择不使用mysql数据库存储用户上传证件照信息,直接通过base64转码的形式在后台处理并返回前端直接通过数据流预览并实现图片下载 一.后端获 ...
- 瑞萨单片机iap串口升级boot程序与app程序合并的工程构建-学习记录
MCU型号: R7F0C004 编辑软件:CS+ for CC boot区程序地址分配:0x0000-0x1ffff app区程序地址分配: 0x2000-0xfffff 复制一份常规的app程序,然 ...
- 寻找连通域C++程序复现（个人C++学习记录）
本文是个人学习C++的学习记录,没学习过C++,主要通过复现程序,解决相关问题学习. 对很多概念的理解大都是通过搜索再加自圆其说,所以肯定有很多错误和理解不到位的地方,还望大佬们多多指点,小白们相互讨 ...
- 微信小程序开发学习记录01
微信小程序结构 根目录 app.js:小程序逻辑文件(必须) app.json:小程序配置文件(必须) app.wxss:全局公共样式文件(非必须) pages 组成小程序的多个页面,每个页面都有: ...
- 微信小程序 -- 易购商城（学习记录）
第一阶段记录 恭喜拖延症晚期终于完成了一个界面~虽然接口都是教程给的,但也算是入手的第一个比较完整的小项目啦(除了大作业课设啥的),希望8月份能把这个小程序完全搞定鸭! 当当当,现在的效果图: 202 ...
最新文章
- 你的组织为自动化测试做好准备了吗?
- JAVA移慎_谨慎使用Java8的默认方法
- Hyperledger Fabric 智能合约实战 (3) 安装fabric
- Access数据库查询练习专用数据库 －手机号码归属地Access数据库_MobileDB（10万条记录）...
- 机器学习-集成学习-提升树-Xgboost
- 基于Flask实现后台权限管理系统 - 表设计
- .NET Core中间件的注册和管道的构建（1）---- 注册和构建原理
- java hashmap实例,关于java中的HashMap的实例操作
- 2018-2019-2 网络对抗技术 20165320 Exp2 后门原理与实践
- 兼容所有浏览器的设为首页收藏本站js代码，推荐使用
- WORD2010每次启动都要配置
- java.lang.ClassNotFoundException: com.sun.xml.ws.spi.ProviderImpl解决办法
- Servlet概述及其原理
- jquery dialog 打开的时候自动聚焦解决方法
- 《计算机网络自顶向下方法第7版》第二章习题解答
- 基于Dlib库构建人脸识别数据集
- 搜索引擎那些你不知道的事
- python主流解析库(re beautifulsoup pyquery xpath)实战--爬取猫眼电影排行
- 锚点的作用是什么？如何创建锚点？
- String,StringBuffer,StringBuffer的区别
热门文章