# WXAPP

**Repository Path**: simonck666/wxapp

## Basic Information

- **Project Name**: WXAPP
- **Description**: learn some knowledge for wx app
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-30
- **Last Updated**: 2022-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WX_Mini_APP Learning

## 1. Layout

![Layout](pic/Layout.png)

- `project.config.json`：项目配置文件，做一些个性化设置，例如界面颜色，编译配置等等

- `app.json`：当前小程序的全局配置，包括了小程序的所有页面路径，页面表现，网络超时时间，底部 tab 等/

- `sitemap`：配置小程序及其页面是否允许被微信索引

- `pages`里边包含一个个具体的页面

- `wxss`：页面样式，
  
  - `app.wxss`作为全局样式，会用作于当前小程序的所有页面
  
  - `page.wxss`：局部页面样式，仅对当前页面生效

- `app.js`：小程序的逻辑

- `js`：页面逻辑

- `json`：页面配置

- `wxml`：页面结构

### 1. app.json

```json
{
  "pages":[
    // 页面目录
    "pages/index/index",
    "pages/logs/logs",

    // 创建新page直接在此写出路径创建就好
    "page/basic_concept/basic_concept"
  ],
  "window":{
    // window 组件
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
```

## 2. WXML组件

### 1. 基本布局容器

[cover-image | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html)

### 2. 媒体组件

[audio | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/audio.html)

### 3. 超链接组件 Navigator

[navigator | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)

### 4. 滑动组件 Scrool-view

[scroll-view | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html)

### 5. 轮播图组件 Swiper

[swiper | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)

### 6. 表单组件 Form

[button | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)

### 7. 输入框 Input

[input | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/input.html)

## 3. 框架

### 1. 小程序配置

[全局配置 | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)

[页面配置 | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)

```json
{
  "pages":[
    "pages/forms/forms",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}
```

## 4. wxml 数据绑定

```js
// pages/wxmldatablind/wxmldatablind.js
Page({

    /**
     * Page initial data
     */
    data: {
        title: "wechat_data_blind",
        major: ["cst", "ds", "fm"],
        person: {
            name: "Simon",
            age: 20,
            sex: "famel"
        },
        listObj: [
            {title: "hello", time: "2022"},
            {title: "hello2", time: "2023"},
            {title: "hello3", time: "2024"},
            {title: "hello4", time: "2025"}
        ]
    },

    /**
     * Lifecycle function--Called when page load
     */
    onLoad: function (options) {

    },

    /**
     * Lifecycle function--Called when page is initially rendered
     */
    onReady: function () {

    },

    /**
     * Lifecycle function--Called when page show
     */
    onShow: function () {

    },

    /**
     * Lifecycle function--Called when page hide
     */
    onHide: function () {

    },

    /**
     * Lifecycle function--Called when page unload
     */
    onUnload: function () {

    },

    /**
     * Page event handler function--Called when user drop down
     */
    onPullDownRefresh: function () {

    },

    /**
     * Called when page reach bottom
     */
    onReachBottom: function () {

    },

    /**
     * Called when user click on the top right corner to share
     */
    onShareAppMessage: function () {

    }
})
```

```html
<!--pages/wxmldatablind/wxmldatablind.wxml-->
<text>pages/wxmldatablind/wxmldatablind.wxml</text>

<view>
    {{title}}
</view>

<view>
    {{major}}
</view>

<view>
    {{person.name}} - {{person.age}} - {{person.sex}}
</view>

<!-- 条件渲染 -->
<view wx:if="{{false}}">
    false
</view>
<view wx:else="">
    Else
</view>

<view wx:if="{{true}}">
    True
</view>

<!-- block标签：只是标签，不会改变结构，填充的标签，不会改变布局结构 -->
<block wx:if="{{true}}">
    <navigator url="/pages/forms/forms">Jump1</navigator>
    <view>Title</view>
    <view>Content</view>
</block>
<navigator wx:else="" url="/pages/basicLayout/basicLayout">Jump2</navigator>


<!-- 列表渲染 -->
<!-- index: 索引值 -->
<!-- item: 数组的每一项 -->
<view wx:for="{{10}}" wx:key="*this">
    <text>for {{index}}</text>
</view>

<view wx:for="{{[11,22,33,44]}}" wx:key="*this">
    {{index}} - {{item}}
</view>

<view wx:for="{{major}}" wx:key="*this">
    {{index}} - {{item}}
</view>

<view wx:for="{{major}}" wx:for-index="i" wx:for-item="content" wx:key="*this">
    {{i}} - {{content}}
</view>

<view>
    <view wx:for="{{listObj}}" wx:key="*this">
        <text>{{item.title}}</text> - <text>{{item.time}}</text>
    </view>
</view>
```

## 5. 生命周期函数

[Page(Object object) | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html)

生命周期函数就是小程序一次运行循环中的每一步，第一个生命周期函数走完，会走下一步，然后一个一个往后走，直到最后一个生命周期函数走完，然后回到第一个生命周期函数，继续执行。

- `onLoad` and `onReady` 在小程序打开完成之后就已经执行完成，切换后台再回归不会重新加载函数内容

- `onShow` 在切换后台回到小程序后，这个生命周期函数还是会重新加载一次，但是上述两个函数不会重新加载

- `onHide`在切换到后台时，就会触发此生命周期函数

- `onPullDownRefresh`监听页面下拉刷新，下拉刷新之后就会被触发

- `onReachBottom`监听页面是否触底
  
  - 应用：当页面触底，加载更多的数据

```json
{
  "usingComponents": {},
  "onPullDownRefresh": true
}
```

```js
// pages/lifecircle/lifecircle.js
Page({

    /**
     * Page initial data
     */
    data: {

    },

    /**
     * Lifecycle function--Called when page load
     */
    onLoad: function (options) {
        console.log("onLoad")
    },

    /**
     * Lifecycle function--Called when page is initially rendered
     */
    onReady: function () {
        console.log("onReady")
    },

    /**
     * Lifecycle function--Called when page show
     */
    onShow: function () {
        console.log("onShow")
    },

    /**
     * Lifecycle function--Called when page hide
     */
    onHide: function () {

    },

    /**
     * Lifecycle function--Called when page unload
     */
    onUnload: function () {

    },

    /**
     * Page event handler function--Called when user drop down
     */
    onPullDownRefresh: function () {
        console.log("Pull Down Refresh")
    },

    /**
     * Called when page reach bottom
     */
    onReachBottom: function () {
        console.log("Get Bottom")
    },

    /**
     * Called when user click on the top right corner to share
     */
    onShareAppMessage: function () {

    }
})
```

## 6. 事件系统

[事件 | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html)

1. 事件绑定

```html
<!--pages/lifecircle/lifecircle.wxml-->
<!-- 绑定手指按下事件: tap -->
<!-- data-title 绑定的名字为 title 的数据，尽量用小写 -->
<!-- 点击之后显示文字 -->
<view bindtap="myTap" data-title="Tap Title" style="width: 200rpx; height: 200rpx; background-color: pink;"> {{name}} </view>
```

```js
// pages/lifecircle/lifecircle.js
Page({

    /**
     * Page initial data
     */
    data: {
        "title": ""
    },

    myTap: function (params) {
        console.log("Click Now"),
        // params 会返回点击之后的所有对象
        console.log(params),
        console.log(params.currentTarget.dataset.title)

        var dataTitle = params.currentTarget.dataset.title

        // this.data.title = dataTitle 这种方式无法改变 data 中变量的值
        // 需要用以下方式
        this.setData ({
            name: dataTitle
        })
    },

    /**
     * Lifecycle function--Called when page load
     */
    onLoad: function (options) {
        console.log("onLoad")
    },

    /**
     * Lifecycle function--Called when page is initially rendered
     */
    onReady: function () {
        console.log("onReady")
    },
    

})
```

### 点击事件时候返回的事件

![returnData](pic/returnData.png)

- 前端返回的数据一般都在 `currentTarget`中

## 7. API

### 1. 基础

[Object wx.getSystemInfoSync() | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfoSync.html)

### 2. 界面

[wx.showLoading(Object object) | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html)

[wx.showToast(Object object) | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html)

### 3. 路由

[wx.switchTab(Object object) | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html)

- `navigator`无法跳转到 `tabBar`页面

- `wx.switchTab()` 可以跳转到 `tabBar` 页面

```html
<navigator url="/pages/demo/demo" open-type="switchTab">

跳转到 tabBar

</navigator>
```

- 但是 `wx.switchTab()`不能传递参数

[wx.reLaunch(Object object) | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html)

- `wx.reLaunch()`是可以传递参数的

```js
clickBtn:function (params) {
        wx.switchTab({
          // 携带参数
          url: '/pages/index/index?id=123',
        })
    },
```

[wx.navigateBack(Object object) | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)

### 4. 网络

[RequestTask | 微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html)

- 请求后端接口的数据
  
  - https://edu.newsight.cn/wxList.php

```js
// pages/wx_request/wx_request.js
Page({

    /**
     * Page initial data
     */
    data: {
        datalist: [
            {
                title: "Titile1",
                time: "time1",
                url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBgdIAKA4W7NvdN7t0jnxBbrFIiDwoWd7Q8g&usqp=CAU"
            },
            {
                title: "Titile2",
                time: "time2",
                url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBgdIAKA4W7NvdN7t0jnxBbrFIiDwoWd7Q8g&usqp=CAU"

            },
            {
                title: "Titile3",
                time: "time3",
                url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBgdIAKA4W7NvdN7t0jnxBbrFIiDwoWd7Q8g&usqp=CAU"

            }
        ],
        request_data: [

        ],
        number: 1
    },

    // 封装
    getList: function (pagenum = 1) {
        wx.request({
            url: 'https://edu.newsight.cn/wxList.php',
            data: {
                // 只拿 5 条数据
                num: 5,
                page: pagenum
            },
            success:res=>{
                console.log(res.data)
                this.setData({
                    request_data: res.data
                })
            }
        })
    },

    nextPage: function (params) {
        this.data.number++;
        this.getList(this.data.number);
    },

    /**
     * Lifecycle function--Called when page load
     */
    onLoad: function (options) {
        // wx.request({
        //   url: 'https://edu.newsight.cn/wxList.php',
        //   data: {
        //       // 只拿 5 条数据
        //       num: 5,
        //       page: 2
        //   },
        //   success:res=>{
        //       console.log(res.data)
        //       this.setData({
        //           request_data: res.data
        //       })
        //   }
        // })
        
        // 调用函数
        this.getList();
    },

    /**
     * Lifecycle function--Called when page is initially rendered
     */
    onReady: function () {

    },

    /**
     * Lifecycle function--Called when page show
     */
    onShow: function () {

    },

    /**
     * Lifecycle function--Called when page hide
     */
    onHide: function () {

    },

    /**
     * Lifecycle function--Called when page unload
     */
    onUnload: function () {

    },

    /**
     * Page event handler function--Called when user drop down
     */
    onPullDownRefresh: function () {

    },

    /**
     * Called when page reach bottom
     */
    onReachBottom: function () {

    },

    /**
     * Called when user click on the top right corner to share
     */
    onShareAppMessage: function () {

    }
})
```

```html
<!--pages/wx_request/wx_request.wxml-->
<text>pages/wx_request/wx_request.wxml</text>
<view class="out" wx:for="{{datalist}}" wx:key="*this">
    <view class="row">
        <view class="pic">
            <image src="{{item.url}}"></image>
        </view>
        <view class="text">
            <view class="title">
                <text>{{item.title}}</text>
            </view>
            <view class="time">
                <text>{{item.time}}</text>
            </view>
        </view>
    </view>
</view>


<view class="out" wx:for="{{request_data}}" wx:key="*this">
    <view class="row">
        <view class="pic">
            <image src="{{item.picurl}}"></image>
        </view>
        <view class="text">
            <view class="title">
                <text>{{item.title}}</text>
            </view>
            <view class="time">
                <text>{{item.posttime}}</text>
            </view>
        </view>
    </view>
    
</view>

<!-- 翻页功能 -->
<button bindtap="nextPage" type="primary">Next Page</button>

```