【2019.06.16】Django + 微信小程序实现微信小程序2 —— 小程序框架、小程序的逻辑层和视图层

蔚落 2022-10-02 01:48 331阅读 0赞

# `小程序框架` #

## `小程序的配置` ##

*  `全局配置 - app.json`
    
     *  `pages 列表配置`
     *  `window 配置`

> `app.json`

{
    "pages": [
    "pages/logs/logs",
    "pages/index/index"
    ],
    "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json",
    "tabBar": {
    "list": [{
    "pagePath": "pages/index/index",
    "text": "首页",
    "iconPath": "",
    "selectedIconPath": ""
    },
    {
    "pagePath": "pages/logs/logs",
    "text": "日志",
    "iconPath": "",
    "selectedIconPath": ""
    }]
    }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 1][]

*  页面配置 - <page name>.json
    
     *  只能配置全局配置中的window配置项内容
        
         *  开启下拉刷新
        
        > index.json

`{ "enablePullDownRefresh": true }`

## 小程序的逻辑层和视图层 ##

### 逻辑层 ###

*  小程序的注册逻辑
    
     *  App函数
    
    > 回调函数  
    > onLaunch: function () \{\} 当小程序初始化完成时，会触发onLaunch，全局只调用一次  
    > onShow: function()\{\} 当小程序启动，或从后台进入前台显示，会触发 onShow  
    > onHide: function()\{\} 当小程序从前台进入后台，会触发 onHide
    
    \- 注册全局唯一的小程序  
    \- 只能调用一次  
    \- 接受一个对象作为函数参数
 *  页面注册逻辑
    
     *  Page函数
        
         *  注册一个页面
         *  接受一个对象作为函数参数
     *  页面数据
        
         *  data属性  
            ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 2][]
         *  使用全局数据  
            ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 3][]
     *  生命周期回调  
        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 4][]

### 视图层 ###

*  小程序的视图层
    
     *  数据绑定  
        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 5][]
     *  条件渲染  
        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 6][]
     *  列表渲染  
        ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 7][]

绑定事件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 8][]

*  事件绑定的写法以key、value的形式
 *  key 以bind或catch开头，然后跟上事件的类型  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 9][]

## 小程序框架 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 10][]

小结：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 11][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019061622405797.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 1]: /images/20220113/6f1e25a587fe47f4998e5d298806afb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 2]: /images/20220113/bd076876d6ca422e8f40c4a84f506411.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 3]: /images/20220113/27f6e39fc3704494b34c7206789f29ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 4]: /images/20220113/07b3e70e45d340f08a60973653ca7074.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 5]: /images/20220113/e575dabf1a0641619d26900a11ae0fd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 6]: /images/20220113/11c1b371394b43649f753318b23fd18d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 7]: /images/20220113/aa1d2930c6784630a59762ccdd3ba997.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 8]: /images/20220113/9d516e81e22848f8ba6b2518f924b300.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 9]: /images/20220113/4d7608ab3fb743af9336140a4e5ac94e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 10]: /images/20220113/065b8f7c2e104578a19c02e204f7a4fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 11]: /images/20220113/8d8716b361f14aafbc065c06df6e4c54.png