精华内容
下载资源
问答
  • 常用小程序开发框架浅析

    万次阅读 2019-03-08 13:41:23
    小程序第三方框架对比 ( wepy / mpvue / taro /Mpx /OKAM) 众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在...

    小程序第三方框架对比 ( wepy / mpvue / taro /Mpx /OKAM)

       

     

         众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正;

    微信小程序成为当下热门话题,下面从多个方面来谈谈5种不同的小程序开发框架 对比

    最新消息总结,开发一个小程序我们可以选择的第三方框架有5种,大家比较熟悉的有美团小程序框架mpvue,还有组件化框架等等,下面小编就5种不同的小程序开发框架的特性进行对比总结。

    5种不同的小程序开发框架 对比

    小程序开发第三方框架 特性
    官方框架MINA

    小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。

    MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,

    对上层提供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力,快速构建一个应用。

    美团小程序框架mpvue

    mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:

    彻底的组件化开发能力:提高代码复用性

    完整的 Vue.js 开发体验

    方便的 Vuex 数据管理方案:方便构建复杂应用

    快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload

    支持使用 npm 外部依赖

    使用 Vue.js 命令行工具 vue-cli 快速初始化项目

    H5 代码转换编译成小程序目标代码的能力

    Tina.js                       一款轻巧的渐进式微信小程序框架

     轻盈小巧。 极易上手,保留 MINA (微信小程序官方框架) 的大部分 API 设计;无论你有无小程序开发经验,都可以轻松过渡上手。 渐进增强,既有状态管理器,也有路由增强,还可以自己编写插件。
    组件化开发框架wepy

    WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。

    特性:

    类Vue开发风格

    支持自定义组件开发

    支持引入NPM包

    支持Promise

    支持ES2015+特性,如Async Functions

    支持多种编译器,Less/Sass/Styus、Babel/Typescript、Pug

    支持多种插件处理,文件压缩,图片压缩,内容替换等

    支持 Sourcemap,ESLint等

    小程序细节优化,如请求列队,事件优化等

    前端框架weweb

    weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。

    特性: 跨平台,一套代码多端运行(小程序、h5、未来直接打包成安卓、ios app也不是梦) 自带常用组件,完美继承了小程序内置组件 兼容小程序rpx语法,使页面更容易适配各种机型

     

    以上是5种不同的小程序开发框架 对比,是开发一个小程序常用的几个第三方框架

     小程序开发有哪些痛点?

    • 频繁调用 setData及 setData过程中页面跳闪
    • 组件化支持能力太弱(几乎没有)
    • 不能使用 less、scss 等预编译器
    • request 并发次数限制

     为什么使用第三方框架? 

    • 只要熟悉vue或react即可快速上手,学习成本低 
    • 一套代码可在多端编译运行(微信,支付宝,h5,RN)  支付宝小程序暂不完善
    • 组件化开发,完美解决组件隔离,组件嵌套,组件通信等问题 
    • 支持使用第三方 npm 资源
    • 使小程序可支持 Promise,解决回调烦恼
    • 可使用 Generator Fu-nction / Class / Async Function 等特性,提升开发效率 
    • 对小程序本身的优化,如生命周期的补充,性能的优化等等
    • 支持样式编译器: Scss/Less,模板编译器,代码编译器:Babel/Typescript。

        第三方框架对比 wepy mpvue taro

      在这里我通过对目前已开源的三种常用小程序框架做一个综合对比, 还有一个叫nanchi的基于react的小程序转译框架,由于没来的及研究暂不做比较;

    • WEPY https://tencent.github.io/wepy/document.html

      腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等;WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本, 最新版本为1.7.2; 

    • MpVue http://mpvue.com/mpvue/#-html

      美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。mpvue在发布后的几天间获得2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;

    • Taro https://taro.aotu.io/

       京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative;

    Star 

      

               

     生命周期

      同为vue规范的mpvue和wepy的生命周期和各种方法不尽相同

      wepy

      wepy生命周期基本与原生小程序相同,再此基础上糅合了一些vue的特性; 对于WePY中的methods属性,因为与Vue中的使用习惯不一致,非常容易造成误解,这里需要特别强调一下:WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法,这与Vue中的用法是不一致的。  

    复制代码

    import wepy from 'wepy';
    
    export default class MyPage extends wepy.page {
    // export default class MyComponent extends wepy.component {
        customData = {}  // 自定义数据
    
        customFunction () {}  //自定义方法
    
        onLoad () {}  // 在Page和Component共用的生命周期函数
    
        onShow () {}  // 只在Page中存在的页面生命周期函数
    
        config = {};  // 只在Page实例中存在的配置数据,对应于原生的page.json文件
    
        data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定
    
        components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件
    
        mixins = [];  // 声明页面所引用的Mixin实例
    
        computed = {};  // 声明计算属性(详见后文介绍)
    
        watch = {};  // 声明数据watcher(详见后文介绍)
    
        methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明
    
        events = {};  // 声明组件之间的事件处理函数
    }

    复制代码

      mpvue

      mpvue 除了 Vue 本身的生命周期外,还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期 钩子。

    复制代码

     1Vue
     3 beforeCreate
     4 created
     5 beforeMount
     6 mounted
     7 beforeUpdate
     8 updated
     9 activated
    10 deactivated
    11 beforeDestroy
    12 destroyed
    
    13 app 部分
    15 onLaunch,初始化
    16 onShow,当小程序启动,或从后台进入前台显示
    17 onHide,当小程序从前台进入后台
    
    18 page 部分
    20 onLoad,监听页面加载
    21 onShow,监听页面显示
    22 onReady,监听页面初次渲染完成
    23 onHide,监听页面隐藏
    24 onUnload,监听页面卸载
    25 onPullDownRefresh,监听用户下拉动作
    26 onReachBottom,页面上拉触底事件的处理函数
    27 onShareAppMessage,用户点击右上角分享
    28 onPageScroll,页面滚动
    29 onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)

    复制代码

    简单示例

    复制代码

    new Vue({
      data: {
        a: 1
      },
      created () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      },
      onShow () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a, '小程序触发的 onshow')
      }
    })
    // => "a is: 1"

    复制代码

     taro与react生命周期完全相同

    复制代码

    class Clock extends Component {
      constructor (props) {
        super(props)
        this.state = { date: new Date() }
      }
    
      componentDidMount() {
    
      }
    
      componentWillUnmount() {
    
      }
    
      render () {
        return (
          <View>
            <Text>Hello, world!</Text>
            <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
          </View>
        )
      }
    }

    复制代码

    列表渲染

    在列表渲染上三者也分别有不同的应用方法

    wepy当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签),必须使用WePY定义的辅助标签<repeat>

    复制代码

    <template>
        <!-- 注意,使用for属性,而不是使用wx:for属性 -->
        <repeat for="{{list}}" key="index" index="index" item="item">
            <!-- 插入<script>脚本部分所声明的child组件,同时传入item -->
            <child :item="item"></child>
        </repeat>
    </template>
    
    <script>
        import wepy from 'wepy';
        // 引入child组件文件
        import Child from '../components/child';
    
        export default class Index extends wepy.component {
            components = {
                // 声明页面中要使用到的Child组件的ID为child
                child: Child
            }
    
            data = {
                list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
            }
        }
    </script>

    复制代码

    mpvue使用v-for与vue一致,只是需要注意一点,嵌套列表渲染,必须指定不同的索引!

    复制代码

    <!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 -->
    <template>
        <ul v-for="(card, index) in list">
            <li v-for="(item, itemIndex) in card">
                {{item.value}}
            </li>
        </ul>
    </template>

    复制代码

    taro的列表循环用法基本与react相同,有一点需要注意,在 React 中,JSX 是会编译成普通的 JS 的执行,每一个 JSX 元素,其实会通过 createElement 函数创建成一个 JavaScript 对象(React Element),因此实际上你可以这样写代码 React 也是完全能渲染的:

    const list = this.state.list.map(l => {
      if (l.selected) {
        return <li>{l.text}</li>
      }
    }).filter(React.isValidElement)

    但是 Taro 中,JSX 会编译成微信小程序模板字符串,因此你不能把 map 函数生成的模板当做一个数组来处理。当你需要这么做时,应该先处理需要循环的数组,再用处理好的数组来调用 map 函数。例如上例应该写成:

    const list = this.state.list
      .filter(l => l.selected)
      .map(l => {
        return <li>{l.text}</li>
      })

    事件处理

    mpvue目前全支持小程序的事件处理器,引入了 Vue.js 的虚拟 DOM ,在前文模版中绑定的事件会被挂在到 vnode 上,同时 compiler 在 wxml 上绑定了小程序的事件,并做了相应的映射,所以你在真实点击的时候通过 runtime 中 handleProxy 通过事件类型分发到 vnode 的事件上,同 Vue 在 WEB 的机制一样,所以可以做到无损支持。同时还顺便支持了自定义事件和 $emit 机制

    复制代码

    // 事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件
    {
        click: 'tap',
        touchstart: 'touchstart',
        touchmove: 'touchmove',
        touchcancel: 'touchcancel',
        touchend: 'touchend',
        tap: 'tap',
        longtap: 'longtap',
        input: 'input',
        change: 'change',
        submit: 'submit',
        blur: 'blur',
        focus: 'focus',
        reset: 'reset',
        confirm: 'confirm',
        columnchange: 'columnchange',
        linechange: 'linechange',
        error: 'error',
        scrolltoupper: 'scrolltoupper',
        scrolltolower: 'scrolltolower',
        scroll: 'scroll'
    }

    复制代码

    踩坑注意(官方文档):

    • 列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊,它的 event type 有 begin 和 end 两个,导致我们无法在handleProxy 中区分到底是什么事件,所以你在监听此类事件的时候同时监听事件名和事件类型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
    • 小程序能力所致,bind 和 catch 事件同时绑定时候,只会触发 bind ,catch 不会被触发,要避免踩坑。
    • 事件修饰符
      • .stop 的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的 catchEventName 失效!
      • .prevent 可以直接干掉,因为小程序里没有什么默认事件,比如submit并不会跳转页面
      • .capture 支持 1.0.9
      • .self 没有可以判断的标识
      • .once 也不能做,因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理,但非常的不优雅,违背了原意,暂不考虑
    • 其他 键值修饰符 等在小程序中压根没键盘,所以。。。

    wepy事件绑定区别于vue,根据原生小程序事件提供了语法优化

    绑定事件
     bindtap="click" 替换为 @tap="click",
    取消冒泡
    原catchtap="click"替换为@tap.stop="click"。

    捕获监听事件
     capture-bind:tap="click" 替换为 @tap.capture="click",
    中断捕获监听
    capture-catch:tap=“click"替换为 @tap.capture.stop="click"。

    Taro 元素的事件处理和 DOM 元素的很相似。但是有一点语法上的不同:

    Taro 事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串 (DOM 元素的写法)。 例如,传统的微信小程序模板:

    <button οnclick="activateLasers">
      Activate Lasers
    </button>

    Taro 中稍稍有点不同:

    <button onClick={this.activateLasers}>
      Activate Lasers
    </button>

    在 Taro 中另一个不同是你不能使用 catchEvent 的方式阻止事件冒泡。你必须明确的使用 stopPropagation。例如,阻止事件冒泡你可以这样写:

    复制代码

    class Toggle extends React.Component {
      constructor (props) {
        super(props)
        this.state = {isToggleOn: true}
      }
    
      onClick = (e) => {
        e.stopPropagation()
        this.setState(prevState => ({
          isToggleOn: !prevState.isToggleOn
        }))
      }
    
      render () {
        return (
          <button onClick={this.onClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        )
      }
    }

    复制代码

     request请求

    wepy对wx.request做了接受参数的修改,值得一提的是它提供了针对全局的intercapter拦截器
    

    复制代码

    // 原生代码:
    
    wx.request({
        url: 'xxx',
        success: function (data) {
            console.log(data);
        }
    });
    
    // WePY 使用方式, 需要开启 Promise 支持,参考开发规范章节
    wepy.request('xxxx').then((d) => console.log(d));
    
    // async/await 的使用方式, 需要开启 Promise 和 async/await 支持,参考 WIKI
    async function request () {
       let d = await wepy.request('xxxxx');
       console.log(d);
    }

    复制代码

    拦截器

    复制代码

    import wepy from 'wepy';
    
    export default class extends wepy.app {
        constructor () {
            // this is not allowed before super()
            super();
            // 拦截request请求
            this.intercept('request', {
                // 发出请求时的回调函数
                config (p) {
                    // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
                    p.timestamp = +new Date();
                    console.log('config request: ', p);
                    // 必须返回OBJECT参数对象,否则无法发送请求到服务端
                    return p;
                },
    
                // 请求成功后的回调函数
                success (p) {
                    // 可以在这里对收到的响应数据对象进行加工处理
                    console.log('request success: ', p);
                    // 必须返回响应数据对象,否则后续无法对响应数据进行处理
                    return p;
                },
    
                //请求失败后的回调函数
                fail (p) {
                    console.log('request fail: ', p);
                    // 必须返回响应数据对象,否则后续无法对响应数据进行处理
                    return p;
                },
    
                // 请求完成时的回调函数(请求成功或失败都会被执行)
                complete (p) {
                    console.log('request complete: ', p);
                }
            });
        }
    }

    复制代码

    taro对request进行了二次封装,可以使用Taro.request(OBJECT)发起网络请求,支持 Promise 化使用。

     

    复制代码

    import Taro from '@tarojs/taro'
    
    Taro.request({
      url: 'http://localhost:8080/test',
      data: {
        foo: 'foo',
        bar: 10
      },
      header: {
        'content-type': 'application/json'
      }
    })
      .then(res => console.log(res.data))

    复制代码

    mpvue没有对request做特殊优化,与原生相同,可以自己根据需要进行封装

    状态管理

    wepy 可引用Redux和Mbox,目前wepy的脚手架内已经集成了redux,选择需要即可;

    mpVue使用vuex

    taro使用Redux

    小程序开发框架 Mpx

    Mpx 是滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx ,我们能够最先进的 web 开发体验 (Vue + Webpack) 来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特性:

    • 数据响应特性 (watch/computed)

    • 增强的模板语法(动态组件/样式绑定/类名绑定/内联事件函数/双向绑定等)

    • 深度性能优化(原生自定义组件/基于依赖收集和数据变化的 setData) 

    • Webpack 编译 ( npm/循环依赖/Babel/ESLint/css 预编译/代码优化等)

    • 单文件组件开发

    • 状态管理 (Vuex 规范/多实例/可合并)

    • 跨团队合作 (packages)

    • 逻辑复用能力 (mixins)

    • 脚手架支持

    • 小程序自身规范的完全支持

    • 支付宝小程序的支持

    安装使用

    # 安装mpx命令行工具
    npm i -g @mpxjs/cli
    
    # 初始化项目
    mpx init <project-name>
    
    # 进入项目目录
    cd <project-name>
    
    # 安装依赖
    npm i
    
    # development
    npm run watch
    
    # production
    npm run build -p
    Copy

    OKAM 小程序开发框架

    奥卡姆,一个面向小程序开发的开发框架,提供类 Vue 的开发体验。

    支持平台

    如何选择适合自己的项目

    • 如果只需要做一个微信小程序则根据自己的擅长框架选择mpvue或taro
    • 如果是当前老项目想像向程序迁移同时老项目又是使用vue开发,建议使用mpvue或wepy
    • 如果是老项目使用react开发且需要部分迁移小程序,建议使用taro
    • 如果是新项目且新项目需要同时支持微信小程序和支付宝小程序, 建议使用原生开发,因为目前框架的转译支付宝小程序支持并不是很好,且出了问题不好定位修改, 但如果是小demo不涉及太多逻辑的项目都可以使用框架作为尝鲜; 但如果是涉及太多交互逻辑的则不建议使用框架转译,由于支付宝小程序在视图层基本与小程序一致所以建议手动更改替换部分方法和全局替换一些属性或文件名,如wxml替换为axml这种, 手动转换时间比大概是四比一; 当然如果人手足够一端开发一个是最好的.

    小程序开发框架集合

    UI组件

    开发框架

    实用库

    开发工具

    服务端

    其他

    Demo

    【参考文档】

    1、值得推荐的一款小程序开发框架wepy - web https://blog.csdn.net/web_yjw/article/details/81078222

    2、小程序wepy实战开发_V1.0 http://wepydemo.mydoc.io/

    3、小程序开发框架:Taro(一)基础篇 -  https://blog.csdn.net/yi_master/article/details/86009294

    4、微信小程序后台开发详解 -  https://blog.csdn.net/g8433373/article/details/80722001

    5、微信小程序结合后台数据管理实现商品数据的动态展示、维护 - 伍华聪 - 博客园 https://www.cnblogs.com/wuhuacong/p/7462086.html

    展开全文
  • 格式调整 Ctrl+S:保存文件 Ctrl+[,Ctrl+]:代码行缩进 Ctrl+Shift+[,Ctrl+Shift+]:折叠打开代码块 Ctrl+C,Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行 Shift+Alt+F:代码格式化 ...

    格式调整

    • Ctrl+S:保存文件
    • Ctrl+[,Ctrl+]:代码行缩进
    • Ctrl+Shift+[,Ctrl+Shift+]:折叠打开代码块
    • Ctrl+C,Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
    • Shift+Alt+F:代码格式化
    • Alt+Up,Alt+Down:上下移动一行
    • Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
    • Ctrl+Shift+Enter:在当前行上方插入一行
    • Ctrl+F:全局搜索

    光标相关

    • Ctrl+End:移动到文件结尾
    • Ctrl+Home:移动到文件开头
    • Ctrl+i:选中当前行
    • Shift+End:选择从光标到行尾
    • Shift+Home:选择从行首到光标处
    • Ctrl+Shift+L:选中所有匹配
    • Ctrl+D:选中匹配
    • Ctrl+U:光标会退

    界面相关

    • Ctrl+\:隐藏侧边栏
    • Ctrl+m:打开或者隐藏模拟器
    展开全文
  • python-常用小程序-网页爬虫

    千次阅读 2012-08-24 13:05:43
    对搜索引擎、文件索引、文档转换、数据检索、站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理。事实上,通过Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览器就能够解析和处理...

    1,下载网页单幅图片到本地文件夹

    # -* - coding: UTF-8 -* -
    #!/usr/bin/python
    #下载网页图片到本地文件夹
    import os,urllib2,urllib
              
    #设置下载后存放的本地路径"E:\img\1.jpg"
    path=r'E:\img'
    file_name=r'1.jpg'
    dest_dir=os.path.join(path,file_name)
    
    #设置链接的路径
    url="http://pic3.nipic.com/20090518/2662644_083611033_2.jpg"
    
    #定义下载函数downLoadPicFromURL(本地文件夹,网页URL)
    def downLoadPicFromURL(dest_dir,URL):
            try:
              urllib.urlretrieve(url , dest_dir)
            except:
              print '\tError retrieving the URL:', dest_dir
    
    #运行
    downLoadPicFromURL(dest_dir,url)
    


    2,下载网页一楼多幅照片到本地文件夹

    # -* - coding: UTF-8 -* -
    #!/usr/bin/python
    #下载网页所有图片到本地文件夹
    import os,urllib2,urllib
              
    import re,urllib2
    
    def getPage(url):
        '''下载文件html代码,找出一楼的核心代码'''
        opener = urllib2.build_opener()
        #不加头信息则出现403错误和乱码
        opener.addheaders = [('User-agent', 'Mozilla/5.0')];
        htmlAll = opener.open( url ).read()
        reg1Floor = '<div class="msgfont">(.*?)</div>'
        html = re.search(reg1Floor,htmlAll)
        html = html.group()
        #文件保存编码和文件编辑编码都是utf-8,所以decode一次,不然会出现乱码,但是不影响结果。
        return html.decode('utf-8')
    
    def getImg(url):
        '''从核心代码中照图图片地址,并且下载保存、命名'''
        pageHtml = getPage(url)
        #找到所有图片地址
        regImg = '<img src="(.*?)"  alt="" />'
        imglist = re.findall(regImg,pageHtml)
        dir = r'E:\img'
        #print imglist
        for index in xrange(0,len(imglist)):
            picname = str(index+1) + '.jpg'
            finename = os.path.join(dir,picname)
            urllib.urlretrieve(imglist[index], finename)
            print finename + ' ok!'
        
    
    if __name__ == '__main__':
        getImg('http://topic.csdn.net/u/20101013/11/024465A6-8E16-444C-9A09-DD374D29044C.html')
    


    3,文摘

    利用Python抓取和解析网页(上)

    http://tech.chinaunix.net/a2009/0707/601/000000601864.shtml

    对搜索引擎、文件索引、文档转换、数据检索、站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理。事实上,通过Python语言提供的各种模块,我们无需借助Web服务器或者Web浏览器就能够解析和处理HTML文档。

    一、解析URL

      通过Python所带的urlparse模块,我们能够轻松地把URL分解成元件,之后,还能将这些元件重新组装成一个URL。当我们处理HTML 文档的时候,这项功能是非常方便的。

    import urlparse
    #不能运行,只是示例
    parsedTuple = urlparse.urlparse("http://www.google.com/search?hl=en&q=urlparse&btnG=Google+Search")
    unparsedURL = urlparse.urlunparse((URLscheme,URLlocation, URLpath, '', '', ''))
    newURL      = urlparse.urljoin(unparsedURL,"/module-urllib2/request-objects.html")
    函数urlparse(urlstring [, default_scheme [, allow_fragments]])的作用是将URL分解成不同的组成部分,它从urlstring中取得URL,并返回元组 (scheme, netloc, path, parameters, query, fragment)。注意,返回的这个元组非常有用,例如可以用来确定网络协议(HTTP、FTP等等 )、服务器地址、文件路径,等等。
      函数urlunparse(tuple)的作用是将URL的组件装配成一个URL,它接收元组(scheme, netloc, path, parameters, query, fragment)后,会重新组成一个具有正确格式的URL,以便供Python的其他HTML解析模块使用。
      函数urljoin(base, url [, allow_fragments]) 的作用是拼接URL,它以第一个参数作为其基地址,然后与第二个参数中的相对地址相结合组成一个绝对URL地址。函数urljoin在通过为URL基地址附加新的文件名的方式来处理同一位置处的若干文件的时候格外有用。需要注意的是,如果基地址并非以字符/结尾的话,那么URL基地址最右边部分就会被这个相对路径所替换。比如,URL的基地址为Http://www.testpage.com/pub,URL的相对地址为test.html,那么两者将合并成http://www.testpage.com/test.html,而非http://www.testpage.com/pub/test.html。如果希望在该路径中保留末端目录,应确保URL基地址以字符/结尾。


























    展开全文
  • 小程序常用api总结

    千次阅读 2019-03-14 16:58:31
    1.小程序转发 onShareAppMessage:function () { return { title: '转发的标题', desc:'微信小程序商城', path:'/pages/index/index', } }
    1.小程序转发
     onShareAppMessage:function () {
        return {
          title: '转发的标题',
          desc:'微信小程序商城',
          path:'/pages/index/index',
        }
      }
    2. 页面一加载消息提示框
    success	显示成功图标,此时 title 文本最多显示 7 个汉字长度 
    loading	显示加载图标,此时 title 文本最多显示 7 个汉字长度 
    none	不显示图标,此时 title 文本最多可显示两行
    wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })
    3. 调起小程序设置界面已经向用户请求过的权限
    wx.openSetting(Object Object)
    
    4.获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址
      需要用户授权
      wx.chooseAddress(Object object)
    
    展开全文
  • uniapp与微信小程序常用api

    千次阅读 2020-05-29 16:53:25
    uniapp与微信小程序常用api 1. 判断用户是否授权 uniapp uni.getSetting(OBJECT)点击 小程序 wx.getSetting(Object object)点击 2. 跳出授权窗口 uniapp uni.authorize(OBJECT)点击 小程序 wx.authorize(Object ...
  • 微信小程序 常用组件分享

    千次阅读 2018-09-24 17:15:18
    使用数据绑定的方法使其为false slider radio checkbox 输出数组形式 ...以下是微信小程序项目...微信小程序演示程序 版权所有,禁止转载,违者必究。 喜欢的朋友可以点赞评论喔,您的支持是我更新最大的动力~ ...
  • 小程序常用的页面布局

    千次阅读 2019-04-26 09:19:39
    小程序中最经常使用到的就是flex布局,今天来讲讲flex布局的几个常用属性。 小程序中常用到: .flex:{display:flex;} 可以实现自定义和自由化的整齐布局。下面是常用的几个属性 1.比例布局【width】; 元素设置...
  • 小程序CSS常用动画示例

    千次阅读 2019-10-02 17:30:35
    小程序CSS常用动画示例 一、前言 正如android的四大动画一样: translate:移动 alpha:透明度变化 rotate:旋转 scale:尺寸变化 css也可以实现 二、CSS3的2D转换 2dtransform的方法: 我们能够对元素进行移动...
  • 小程序开发——常用布局

    万次阅读 2018-04-22 14:57:10
    小程序的布局分为两类:横向布局和纵向布局 横向布局 从左到右 如: .wxss文件 .rowLayout { display: flex; flex-direction: row; } .wxml (views是我在.json定义的数组,有四个元素) ...
  • 微信小程序——WXSS常用属性

    千次阅读 2019-03-05 16:04:45
    最近在弄微信小程序,官方写的东西对于文档来说算是很全的了。 不过,当你像我一样,想写微信小程序的时候依次了解了一下 微信小程序的组件: https://developers.weixin.qq.com/miniprogram/dev/component/ 然后...
  • 微信小程序--几个常用标签

    万次阅读 2018-12-11 17:24:10
    小程序的几个常用标签 先来个前言,小程序开发还是适合有一定开发基础的人学习,教程有不详细的地方和有疑问的地方,欢迎留言 人生如戏,戏如人生。要开发小程序,我们得先学习小程序页面的基本标签是那些。其实...
  • 微信小程序常用开发框架有哪些?

    万次阅读 多人点赞 2019-06-19 09:37:09
    想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库。 1:WeUI 小程序–使用教程 ...
  • 微信小程序ui布局常用技巧

    万次阅读 2016-11-12 14:30:09
    微信小程序ui设计规范汇总:  微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。 【更多原创...
  • 微信小程序常用函数的封装

    千次阅读 2019-01-04 17:41:37
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 在小程序里面经常会反复用到一些方法,例如: 1.网络请求, 2.时间戳转换成日期时间, 3.根据数组中的对象的属性数值大小进行排序, 4....
  • 小程序常用配置、API、事件

    千次阅读 2020-07-18 16:44:02
    配置程序常用 下拉刷新: 底部导航栏配置:
  • 微信小程序开发常用快捷键

    万次阅读 2019-09-16 20:42:08
    crtl+/ 行注释 shift+alt+/ 块注释
  • 小程序常用的9个框架总结

    万次阅读 2020-09-10 09:48:13
    想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库。 ####1:WeUI 小程序–使用教程 ...
  • 小程序常用的标签

    万次阅读 2019-01-21 18:02:09
    小程序中的常用标签也是就是我们常用的这些 view(视图容器)、rich-text(富文本)、swiper(滑块视图容器)、icon(图标)、text(文字)、progress(进度条)、button(按钮)、form(表单)、input(输入框)、...
  • 常用的微信小程序弹出框事件

    千次阅读 2019-07-06 10:36:56
    常用小程序弹出框wx.showToast()wx.showLoading()wx.showModal() wx.showToast() 代码: wx.showToast({ title: ‘提示信息’, }) 参数: title:显示的提示信息,在没有图标的情况下,文本内容可显示两行 icon: ...
  • 小程序常用ui库 组件库

    千次阅读 2018-10-18 10:44:28
    1、腾讯出品 Github:https://github.com/Tencent/weui ...   2、美团小程序框架mpvue Github:https://github.com/Meituan-Dianping/mpvue 官网: http://mpvue.com/   3、组件化开发框架wepy...
  • 微信小程序----常用组件

    千次阅读 2017-08-27 12:13:19
    微信小程序常用控件view 微信小程序常用控件scroll-view 微信小程序常用控件swiper 微信小程序常用控件icon text progress 源码下载:
  • 微信小程序 开发 常用 快捷键

    千次阅读 2018-03-02 15:47:45
    常用快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行 Shift+Alt+F:代码格式化 Alt+...
  • 微信小程序常用样式汇总

    千次阅读 多人点赞 2018-09-07 15:50:00
    小程序特点:用完即走、低频使用、性能要求低,不支持webview; 以iphone6尺寸(750*1334)为视觉稿进行设计; iphone6下1px=1rpx=0.5pt iphone6 plux下1px=0.6rpx; 使用rpx,小程序会自动在不同的分辨率下进行...
  • 微信小程序常用快捷键

    千次阅读 2019-07-17 17:16:18
    格式调整  Ctrl+S:保存文件  Ctrl+[, Ctrl+]:代码行缩进  Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块  Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行  Shift+Alt+F:代码格式化 ...
  • <button class='btn' open-type="getUserInfo" bindgetuserinfo='authorize'></button>
  • 微信小程序例子——使用icon组件显示常用图标
  • 微信小程序 常用快捷键

    千次阅读 2016-10-08 10:35:29
    格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行 Shift+Alt+F:代码格式化 Alt+Up,Alt+...
  • 小程序开发——常用API(笔记)

    千次阅读 2019-04-02 09:08:15
    判断小程序的API、回调、参数、组件等是否在当前版本可用 wx.getSystemInfoSync() | wx.getSystemInfo() 获取系统信息 wx.getLaunchOptionsSync() 获取小程序启动时的参数 属性 path:启动小程序的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,096,271
精华内容 438,508
关键字:

常用的小程序