# wx-shopping

**Repository Path**: noviceLuo/wx-shopping

## Basic Information

- **Project Name**: wx-shopping
- **Description**: 微信购物商城
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-12-06
- **Last Updated**: 2024-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wx-shopping

#### 介绍
微信购物商城 小程序版本-V2.9.4

#### 软件架构

#### 目录结构
```
├── assets                  静态资源
|   └── images              图片
├── common                  公用组件
├── components              组件
├── pages                   页面
|   ├── home
|   |   ├── home.wxml
|   |   ├── home.js
|   |   ├── home.json
|   |   └── home.wxss
|   ├── category
|   ├── cart
|   └── profile
├── service                 ajax请求
├── utils                   工具类
├── app.js                  小程序主js入口
├── app.json                全局配置文件
├── app.wxss                全局样式文件
├── project.config.json     版本及配置管理
└── sitemap.json            小程序SEO管理
```
#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 小程序需要了解点
1. 如何使用npm
2. 如何使用iconfont字体库
3. 如何编写独立插件
4. 如何分包加载
5. components组件编写
6. tamplate模板编写
```
1. tamplate代码-使用例子:
  <!-- tal.wxml -->
  <tamplate name="head">
    <view>{{title}}</view>
  </tamplate>

  <!-- home.wxml -->
  <import scr="tal.wxml">
  <template is="head" data="{{title: 'text'}}"/>

2. WXML 提供两种文件引用方式import和include
  |—— import可以在该文件中使用目标文件定义的template
      <import src="item.wxml">
      import有作用域的概念，即只会import目标文件中定义的tamplate，而不会import目标文件import的tamplate.

  |—— include 可以将目标文件除了<tamplate /> <wxs />外的整个代码引入，相当于拷贝到include位置。
```
7. 查看文档，当遇到问题可以快速定位到指定位置

#### 编程范式
1. 命令式编程：元素操作DOM
2. 声明式编程：Vue/React


#### 生命周期
```
1. App
onLaunch    监听小程序初始化        (小程序初始化完成时触发,全局只触发一次)
onShow      监听小程序启动或切前台  (小程序启动或从后台进入前台显示触发)
onHide      监听小程序切后台        (小程序从前台进入后台时触发)

2.Page
onLoad      监听页面加载         <页面加载时触发,一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数>
onShow      监听页面显示          <页面显示/切入前台时触发>
onReady     监听页面初次渲染完成   <页面初次渲染完成时触发。一个页面只会调用一次>
onHide      监听页面隐藏          <页面隐藏/切入后台时触发>
            如: wx.navigateTo或底部 tab 切换到其它页面，小程序切入后台
onUnload    监听页面卸载          <页面卸载时触发>
            如:wx.rediectTo或wx.naigateBack到其它页面时。
```

#### WXML
1. 在WXML中是不能直接调用Page/Component中定义的函数的。

#### WXS(类似于Vue:filter)
1.每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的，对其他模块不可见。
  一个模块要想对外暴露其内部的私有变量与函数,只能通过module.exports实行。
```
.wxs
var bar = function(){
}
// 导入方式一
module.exports = {
  bar: bar
}
// 导入方式二
module.exports.bar = bar;

.wxml
<wxs src=".wxs" module="tools"/>
<view>tools.bar</view>
```
#### template

#### 事件绑定
1. bind
```
// 绑定方式一
bindtab
// 绑定方式二
bind:tab
```