微信小程序初级入门

微信小程序简介

小程序发展历程

微信小程序，小程序的一种，英文名WeChat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用

2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」。

2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供微信小程序在云端服务器的技术方案。

2017年1月9日0点，万众瞩目的微信第一批微信小程序正式低调上线，用户可以体验到各种各样微信小程序提供的服务

注册入门

第一步官网注册账号

https://mp.weixin.qq.com/cgi-bin/wx

保存自己的APPID防止需要的时候去找浪费时间

第二步下载这个开发工具

第三步打开这个开发工具微信扫码登录

进来之后左上角项目新建一个项目

第四步你的快速入门就建立好了

新建之后进来就是这个界面

标签介绍

app.json的window里面配置这个表示页面允许下拉刷新

“enablePullDownRefresh”:true

这条表示手机可以实现横屏竖屏

“pageOrientation”: “auto”

view>标签就类似于html中的div>和p>标签的结合：独占一行

text>标签就类似于span>标签：不会换行

text>里的一些属性：

text selectable>：鼠标长按住字就会出现一个选中的状态

text decode>& nbsp;：解码转义字符 就是相当于把nbsp转成空格

rich-text>{{msg}}</rich-text：直接显示数据

rich-text nodes="{{msg}}">：可以显示h1>之类的文本效果标签

button type=“warn” bindtap=“click”>

type=“warn”：这个button按钮是有点警告的意思

bindtap=“click”：这个是button的点击事件，配置JS文件使用

button open-type=“getUserInfo” bindgetuserinfo=“getUserInfos”>

配置JS打印出来访问者的信息

open-type的值有：share(分享),contact(联系客服)，getUserInfo，getPhoneNumber

type常用的值有：warn，default，primary

checkbox>一般配置checkbox-group>来使用可以达到显示在一行的效果

radio>一般使用radio-group>标签包起来，达到只能选择一个框

JS里面部分操作稍有差异，赋值和取值的方式如下

一个简单的跳转

navigator url="…/index/index">

点击跳转

</navigator

显示一些基本的集合信息

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引

以下是完整详细配置

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

一个简单的WXS (S，script)脚本文件

tabBar

可以跳转首页，购物车，我的，这种窗口

修改别名

自定义组件

步骤：

第一步在components下面新建文件夹并且创建Components

第二步声明组件：在你要引用的界面的json文件里面的usingComponents下用键值对的方式创建，左边双引号里是标签名，右边是第一步要引用的组件路径

第三步直接在第二步文件夹的wxml里面使用这个标签<（这里面填的是第二步声明的标签名）>

**注意：**一定要在使用的wxml里面去使用这个标签不然是不会显示其他文件夹里面的内容的

视图容器

横向纵向滚动

这个是纵向滚动的方式


横向滚动

简单实现轮播图

可移动区域

实现购物车左划删除的效果需配合wxss实现

基础内容

rich-text标签

rich-text它能帮我们把HTML中的标签显示在小程序上

表单组件

picker属性

标题实现选中切换

首先是components下面的wxml文件和wxss文件和js文件

其次是父文件里的wxml和json还要js

swiper

滑块视图容器，可以实现向左向右滑动显示不同的图片

swiper autoplay indicator-dots circular>

autoplay 是否自动切换默认不是

indicator-dots是否显示那个小黑点默认不显示

circular是否循环轮播

js错误

Uncaught (in promise) ReferenceError: result is not defined

index.js? [sm] :105

然后我看了一下js的第105条

if (result.confirm) {

or-dots circular>

autoplay 是否自动切换默认不是

indicator-dots是否显示那个小黑点默认不显示

circular是否循环轮播

js错误

Uncaught (in promise) ReferenceError: result is not defined

index.js? [sm] :105

然后我看了一下js的第105条

if (result.confirm) {

后来我把result改成res就不报错了，不知道是不是因为result是关键字的问题