优语探索 – 第5页 – Discover the Beauty of Programming

2020年微信小程序开发扫盲课程，第三篇：样式和布局

2020年2月18日 liang Flex|微信小程序

1. 尺寸单位。

1.1 rpx和px

微信小程序规定了特有的尺寸单位“rpx”。
原理是无视设备原有尺寸，将所有设备的屏幕宽度统一规定为750rpx。
比如，iPhone6的屏幕宽度像素为：375px，那么在iPhone6下，1rpx = 0.5px。
由于iPhone6的屏幕宽度与微信开发时的屏幕宽度换算为简单的1:2关系，所以实际开发时一般都使用iPhone6屏幕环境进行模拟开发。

1.2 vw和vh

vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

2. 样式。

xsss样式和css样式的语法和运作方式非常相似，如果有css基础，xsss样式非常好理解。

2.1 样式写法。

和css一致：

class样式：.className{/*样式内容*/}
元素样式：elementName{/*样式内容*/}
内联样式：<element style="/*样式内容*/" />

2.2 常用属性。

基本上也和css一致：

color，font-size，background-color，border，width，height

2.3 样式导入。

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径。

3. Flex布局

微信小程序使用Flex布局。
有关Flex布局的详细说明请见：http://www.leonwish.com/archives/319

2020年微信小程序开发扫盲课程，第二篇：代码结构介绍

2020年2月16日 liang 微信小程序

1. 程序总体架构。

通过微信小程序开发工具新建一个项目后，会自动生成项目框架代码如下：

2. 全局文件。

全局文件的文件名是固定的，不可随意指定。
程序入口文件：app.js，app.json，app.wxss
项目配置文件：project.config.json
配置小程序及其页面是否允许被微信索引：sitemap.json
公共方法和变量：utils/util.js

3. pages文件夹下的目录结构。

pages文件夹的名字是可以随便指定的，但是习惯上使用pages。
pages下面存放的是小程序里面的页面文件，一个小程序页面由四个“同名但不同扩展名”的文件组成，这个四个文件又被放在一个与这四个文件同名的文件夹中。
页面文件夹与四个对应的页面文件可以手工新建，也可以通过微信新建page的方式自动生成：

4个页面的运作方式和普通网页HTML+CSS+JS的运行方式非常相似，具体如下：

4.1 .js文件

负责实现页面逻辑。

4.2 .json文件

负责设置标题栏和一些状态参数。

4.3 .wxml文件

页面显示内容。类似HTML文件。

4.4 .wxss文件

负责设置页面排版。类似CSS文件。

2020年微信小程序开发扫盲课程，第一篇：开发准备

2020年2月16日 liang 微信小程序

1. 前言

1.1 为啥标题要加个2020呢？

因为我是从2020年2月开始学的微信小程序开发，微信的生态时刻都在更新，用时间来标识一下以便让读者能够更好地判断本文是否适合。

1.2 微信小程序的语言逻辑和Vue.js有点像

还好我是先学了些Vue.js，开始做微信小程序的时候，发现代码结构和语法和Vue.js有很多相似的地方。
不过即使你没有学过Vue.js，只要你懂Javascript，一样可以做微信小程序开发。

2. 注册微信小程序账号

2.1 如果你没有微信【服务号】【订阅号】账号

进入微信公众平台：https://mp.weixin.qq.com
注册一个微信小程序开发账号。

然后

再然后

2.2 如果你有微信【服务号】【订阅号】账号

可以直接登陆【服务号】或【订阅号】账号，然后在该账号下面添加微信小程序账号。

3. 填写小程序基本信息。

4. 下载微信小程序开发工具

点击上方【文档】

点击上方【工具】然后选择合适的版本下载：

5. 使用微信小程序开发工具

5.1 安装、登陆程序

正常安装开发工具软件，安装完毕后打开，默认出现下面的登录框：

用你注册小程序时认证的微信号扫描二维码即可登陆进入软件开发环境。

5.2 添加新的小程序项目

然后看到下面的页面：

上面创建小程序的时候填写的AppID要到微信公众平台里面查找：

点击【创建】按钮后，进入开发环境：

Python查询MySQL数据库并将查询结果输出到csv文件

2020年2月13日2020年2月13日 liang Python

1. 安装Python链接MySQL插件。

$ pip3 install PyMySQL

2. 完整代码如下：

import os
import pymysql

sku = []

#定义递归函数findPNG，寻找当前目录下所有png类型的文件
def findPNG(sku,dir):
    for ffName in os.listdir(dir):
        if os.path.isfile(dir+"/"+ffName):
            if ffName.split(".")[1] == "png":
                sku.append(ffName.split(".")[0]);
        elif os.path.isdir(dir+"/"+ffName):
            findPNG(sku,dir+"/"+ffName)
findPNG(sku,"./")

h = open("./ProductsInformation.csv","a")
db = pymysql.connect("地址","用户","密码","数据库名" )
cursor = db.cursor()

for s in sku:
    SQL = '''SELECT t1.model,t2.name,t2.tag
             FROM `product` AS t1, `product_description` AS t2
             WHERE t1.product_id = t2.product_id AND t1.model ="{}"'''.format(s)
    cursor.execute(SQL)
    data = cursor.fetchone()
    if data:
        for d in data:
            h.write('"'+d+'",')
        h.write('\n')
    else:
        print(s)

h.close()
db.close()

通过Vue-cli创建Vue项目流程

2020年2月12日2020年2月12日 liang Node.js|Vue.js

0 .Vue.js，Vue-cli，Node.js的理解。

一个js文件就是Vue.js

项目中，通过<script>标签引入一个vue.js文件，这就是我们理解的Vue.js。

命令行里运行vue就是Vue-cli

如果想要在cmd里面运行vue命令，那么就需要安装vue-cli工具。

Node.js就是Javascript的JVM

Node.js就好像是Javascript世界里面的JVM。
vue-cli工具是通过npm的安装的。

1. 安装Node.js

Node.js环境具体安装方法见：http://www.leonwish.com/archives/278

2. 安装vue-cli

vue-cli在vue官网上叫做“脚手架工具”，其实就是个vue的客户端（client）。安装命令如下：

npm install -g vue-cli  //这是npm命令

3. 基于webpack-simple初始化项目

当然，你可以不基于webpack-simple初始化项目，通过vue list命令可以看到，有以下几种初始化方式备选:

通过命令行切换到你的项目创建目录，运行如下命名：

vue init webpack-simple my-project //这是vue命令

这时，基于webpack-simple创建的项目就建好了。

4. 安装相关的依赖。

第三步只是创建了项目骨架，在你实际运行这个项目前，还需要根据自动生成的package.json文件，安装相关的依赖，安装依赖命令如下：

cd my-project //先进到项目目录。
npm install //或者cnpm install，这是npm命令

5. 运行项目

npm run dev //这也是npm命令，npm run命令将会运行项目中的package.json文件中的script部分内容。run后面跟dev，就是运行package.json文件中script部分的dev部分内容。

Vue.js组件学习（3）升级篇

2020年2月10日2020年2月11日 liang Vue.js

1. 组件的命名规则

1.1 两种命名可选方案

使用kebab-case(短横线分隔命名)方法命名

Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用PascalCase(驼峰命名法)方法命名

Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

1.2 强烈建议使用kebab-case命名法

命名组件的时候，强烈推荐使用kebab-case方法命名。这样可以避免和HTML既有元素相冲突。

2. 组件中的props命名规则

HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时，camelCase (驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

如果你使用字符串模板，那么这个限制就不存在了。

3. 组建的全局注册和局部注册

3.1 全局注册和使用。

Vue.component("Com-Name",{...});

全局注册后，任何新创建的Vue根实例id对应的模板中都可以直接使用。

3.2 局部注册和使用

var newCom = {...}

局部注册后，如果需要使用，则需要在创建的Vue的components选项中先定义你想要使用的组件。

var vm = new Vue({
el:"app",
components:{
    'new-com':newCom
}
data:{}
});

Vue.js组件学习（2）进阶篇

2020年2月10日 liang Vue.js

1. 监听子组件事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{fontSize:newsFontSize+'px'}">
                Hello Component!<br/>
                <news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=1"></news-show>
            </div>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:`<p>
                          <span>TITLE:{{newsprops.title}}</span> 
                          <span>CONTENT:{{newsprops.content}}</span> 
                          <span>TIME:{{newsprops.time}}</span> 
                          <button v-on:click="$emit(\'zoom-in-text\')">放大文字</button>
                          </p>`,
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ],
                    newsFontSize:20
                }
            });
        </script>
    </body>
</html>

以上代码理解方式如下：

2. 使用事件抛出一个值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{fontSize:newsFontSize+'px'}">
                Hello Component!<br/>
                <news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=$event"></news-show>
            </div>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:`<p>
                          <span>TITLE:{{newsprops.title}}</span> 
                          <span>CONTENT:{{newsprops.content}}</span> 
                          <span>TIME:{{newsprops.time}}</span> 
                          <button v-on:click="$emit('zoom-in-text',5)">放大文字</button>
                          </p>`,
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ],
                    newsFontSize:20
                }
            });
        </script>
    </body>
</html>

以上代码理解方式如下：

3. 组件的插槽功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-bind:style="{fontSize:newsFontSize+'px'}">
                Hello Component!<br/>
                <news-show v-for="item in news" v-bind:newsprops="item" v-on:zoom-in-text="newsFontSize+=$event">插槽内容，哈哈哈！</news-show>
            </div>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:`<p>
                          <span>TITLE:{{newsprops.title}}</span> 
                          <span>CONTENT:{{newsprops.content}}</span> 
                          <slot></slot>
                          <span>TIME:{{newsprops.time}}</span> 
                          <button v-on:click="$emit('zoom-in-text',5)">放大文字</button>
                          </p>`,
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ],
                    newsFontSize:20
                }
            });
        </script>
    </body>
</html>

以上内容的重点如下：

Vue.js组件学习（1）基础篇

2020年2月10日2020年2月10日 liang Vue.js

关于Vue.js官网教程的点点疑问

我是通过Vue.js官网（https://cn.vuejs.org）学习的Vue技术，先看的视频，后看的文档。
在看视频教程的时候，主讲人说的英文差到我怀疑人生，我当时在想：Vue.js的创始人不是在美国留学的高材生吗？怎么英语还会这么差？不过转念一想，主讲人肯定不是创始人呀，所以英文差也是可以理解的。
然后我又看的文档教程，文档教程中文语言的晦涩程度又让我咋舌，感觉像是硬生生的从英文直译过来的一样。
所以呢，真心建议Vue.js好好的优化一下教程。
以下内容是我综合了Vue.js官网和诸多教程的内容，用相对简单的话素进行了描述，希望能帮到初学者。

1. 什么是组件

组件可以理解为将某些控件、功能集成在一起的类。
在代码中调用页面的方法是：<组件名></组件名>
作为初学者，我更愿意把组件理解为“自定义标签”，将若干复杂的空间、功能封装在一个标签内，然后再去调用。比如，你可以把网页导航条的全部代码封装在组件中。

2. 最简单的组件的定义和使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            Hello Component!<br/>
            <button-counter></button-counter>
        </div>

        <script type="text/javascript">
            Vue.component("button-counter",{
                template:'<button>Button Counter</button>',
            });

            var vm = new Vue({
                el:app
            });
        </script>
    </body>
</html>

这里面的逻辑关系是这样的：

定义（注册）一个组件。
通过new Vue创建Vue的根实例。
在Vue的根实例中使用已经定义（注册）的组件。

注意：

1、2步顺序不可以颠倒，也就是说，组件要先于Vue根实例定义（注册）。
组件的定义（注册）有两种形式：全局注册和局部注册，本例中的组件是采用全局注册的形式进行定义（注册）的。
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的Vue根实例中，也包括其组件树中的所有子组件的模板中。

3. 给组件增加data

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            Hello Component!<br/>
            <button-counter></button-counter>
        </div>

        <script type="text/javascript">
            Vue.component("button-counter",{
                template:'<button v-on:click="count++">Button Counter {{count}} times!</button>',
                data:function(){
                    return {count:0};
                }
            });
            var vm = new Vue({
                el:app
            });
        </script>
    </body>
</html>

上面的代码实现了<button-counter>组件的点击自增功能，这里面值得注意的如下：

可以为组件增加data选项。但data并不是像在new Vue定义时对应一个对象：data: {count: 0}；取而代之的是，一个组件的data选项必须对应一个函数，这样每个组件的实例可以单独维护一份独立的拷贝。如果Vue没有这条规则，则组件实例间的data选项则是共享的。
组件data选项中的元素可以在组件template中被使用。

4. 给组件增加props进行简单数据交互

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            Hello Component!<br/>
            <button-counter title="你好！属性"></button-counter>
        </div>

        <script type="text/javascript">
            Vue.component("button-counter",{
                template:'<button v-on:click="count++">{{title}} Button Counter {{count}} times!</button>',
                data:function(){
                    return {count:0};
                },
                props:["title"]
            });
            var vm = new Vue({
                el:app
            });
        </script>
    </body>
</html>

上面的代码值得注意的如下：

5. 给组件增加props进行复杂数据交互

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            Hello Component!<br/>
            <news-show v-for="item in news" v-bind:title="item.title" v-bind:content="item.content" v-bind:time="item.time"></news-show>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:'<p><span>TITLE:{{title}}</span> <span>CONTENT:{{content}}</span> <span>TIME:{{time}}</span></p>',
                props:["title","content","time"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ]
                }
            });
        </script>
    </body>
</html>

上面这个复杂些，理解方法如下：

6. 对第5部分的属性交换代码进行简化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>About Component</title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            Hello Component!<br/>
            <news-show v-for="item in news" v-bind:newsprops="item"></news-show>
        </div>    
        <script type="text/javascript">
            Vue.component("news-show",{
                template:'<p><span>TITLE:{{newsprops.title}}</span> <span>CONTENT:{{newsprops.content}}</span> <span>TIME:{{newsprops.time}}</span></p>',
                props:["newsprops"]
            });
            var vm = new Vue({
                el:app,
                data:{
                    news:[
                        {title:"标题1",content:"内容1",time:"2020-01-01"},
                        {title:"标题2",content:"内容2",time:"2020-01-02"},
                        {title:"标题3",content:"内容3",time:"2020-01-03"},
                        ]
                }
            });
        </script>
    </body>
</html>

上面这部分可能更加不好理解，解释如下：

1. 尺寸单位。

1.1 rpx和px

1.2 vw和vh

2. 样式。

2.1 样式写法。

2.2 常用属性。

2.3 样式导入。

3. Flex布局

1. 程序总体架构。

2. 全局文件。

3. pages文件夹下的目录结构。

4.1 .js文件

4.2 .json文件

4.3 .wxml文件

4.4 .wxss文件

1. 前言

1.1 为啥标题要加个2020呢？

1.2 微信小程序的语言逻辑和Vue.js有点像

2. 注册微信小程序账号

2.1 如果你没有微信【服务号】【订阅号】账号

2.2 如果你有微信【服务号】【订阅号】账号

3. 填写小程序基本信息。

4. 下载微信小程序开发工具

5. 使用微信小程序开发工具

5.1 安装、登陆程序

5.2 添加新的小程序项目

前言

1. Flex布局是什么？

2. 基本概念

3. 容器的属性

3.1 flex-direction属性

3.2 flex-wrap属性

3.3 flex-flow

3.4 justify-content属性

3.5 align-items属性

3.6 align-content属性

4.项目的属性

4.1 order属性

4.2 flex-grow属性

4.3 flex-shrink属性

4.4 flex-basis属性

4.5 flex属性

4.6 align-self属性