首页

# 使用开发者工具

  1. 扫码绑定微信账号
  2. 新建微信小程序空白模板
  3. 在该工具内实现开发、调试、预览、上传、发布等操作

# 微信页面的组成

一个微信页面由 4 个文件组成

  1. wxml: 放的是微信自定义的标签，不是放 HTML 的那些标签，这些自定义标签可以认为是组件。

  2. wxss: 样式，同 css 一样，可省

  3. js: 用来放 JS 代码，放微信小程序的页面实例代理，类似于 vue 实例

  4. json: 配置该页面的文件，可省

— 在微信小程序不能放除以上 4 个语言外的代码，比如 PHP，Python、.net,java 等等通通不能放 —

总结：微信小程序是纯前端的内容。后端只是给微信小程序提供 json 数据而已。

# 如何新建一个微信小程序页面

  1. 在 pages 下右键单击，选择新建目录
  2. 在该目录下右键单击选择新建 pages 可以一键生成 4 个文件
  3. 还可以自动将该页面的信息写入到路由中（app.json）

# 在微信小程序中写样式

  1. 在页面中写。相当于是在当前页面中有效

  2. 在 app.wxss 中写。相当于是全局的，在任何页面中都有效。可以将全局的样式导入进来。

  3. css 的选择器仅支持常用的。class,id, 标签，过滤，后端，直接子元素，CSS3 的选择器几乎都不支持。

# 小程序常用标签学习

  1. image 标签
1
2
3
<image  mode="aspectFit" ></image>
//如果图片变形了，可以设置mode属性，让图片自适应
具体看这个文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

  1. view

  2. text

  3. navigator

更多查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

# 微信小程序的指令 - 跟 vue 一样

  1. if 控制视图是否显示，如果是 true 则显示，否则不显示

    1
    2
    3
    <view wx:if="{{condition}}"> True </view>
    比如：
    <view wx:if="{{age>18}}"> True </view>

  2. for - 跟 vue 不太一样

    1
    2
    3
    4
    5
    6
    <view wx:for="{{数组或对象}}">
        {{item}}---{{index}}
    </view>
    //vue
    <view v-for="item,index in 数组或对象">
    </view>

  3. 小胡子语法

    1
    2
    3
    4
    5
    {{表达式或来自data中的属性}}
    比如：
    {{msg}}
    {{age>18?'啊哈哈':'啊啊啊'}}
    {{1+2+3}}

# appjson 说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{
  //路由，有多少个页面，就要写多少个链接（url）
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //配置微信小程序顶部界面颜色
  "window":{
    //backgroundTextStyle 下拉的时候的文字配色，默认是浅色，可以写dark
    "backgroundTextStyle":"light",
    //导航条背景色，值必须是16进制的颜色代码
    "navigationBarBackgroundColor": "#fff",
    //指的是页面标题
    "navigationBarTitleText": "Weixin",
    //指的是导航条的文字颜色：black、white
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

# 小程序生命周期

阳光果苏

# 页面通信的第二种方式

  1. 原来用的是本地存储

  2. url 传参

A 页面中将对应的数据，比如 id 等通过 url 传递到 B 页面

类似于 form 表单提交传递到后台一样，get,

php $_GET[‘name’]

https://mp.weixin.qq.com/

注册的小程序要跟线下代码关联，才能发布

需要获取 APPID