精华内容
下载资源
问答
  • 一、 准备工作1、 注册一个微信小程序https://mp.weixin.qq.com/注册页面.png2、 微信小程序开发工具下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html3、小程序APi文档地址...

    一、 准备工作

    1、 注册一个微信小程序

    https://mp.weixin.qq.com/

    310af2f87eae17718def9a33e6a2cb56.png

    注册页面.png

    2、 微信小程序的开发工具下载地址

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    3、小程序APi文档地址

    https://developers.weixin.qq.com/miniprogram/dev/framework/

    准备一个微信号

    二、小程序正式开始

    2.1、创建一个小程序项目

    在微信小程序管理后台拿到对应appid、创建项目

    5e156b5dd74a0768a762d5713a3d999a.png

    创建小程序页面.jpg

    2.2、项目代码结构

    1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

    2、app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。

    3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

    我在实例程序的代码中还有2个文件夹,一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹,pages是存放所有页面的文件夹。我们着重讲一下这个pages.        在这个示例中,我们有两个页面,index 页面和 logs 页面,即欢迎页和小程序启动日志的展示页,他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

    每一个小程序页面是由同路径下同名的四个不同后缀文件组成的,如:index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

    e72a2c3ef7b8b29b6d0465622c2905f4.png

    项目代码结构.png

    2.3、JS 基本页面配置

    Page({
    /**
    * 页面的初始数据
    */
    data: {
    },
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
    },
    /**
    * 生命周期函数--监听页面初次渲染完成
    */
    onReady: function () {
    },
    /**
    * 生命周期函数--监听页面显示
    */
    onShow: function () {
    },
    /**
    * 生命周期函数--监听页面隐藏
    */
    onHide: function () {
    },
    /**
    * 生命周期函数--监听页面卸载
    */
    onUnload: function () {
    },
    /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
    onPullDownRefresh: function () {
    wx.stopPullDownRefresh()//停止当前页面下拉刷新
    },
    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom: function () {
    },
    /**
    * 用户点击右上角分享
    */
    onShareAppMessage: function () {
    },
    })

    2.3、认识基本json页面配置+上拉刷新、下拉加载

    {
    "navigationBarBackgroundColor": "#f00",//修改顶部导航栏颜色
    "navigationBarTitleText": "demo页面",//修改顶部导航栏文字
    "backgroundTextStyle":"dark",//下拉 loading 的样式,仅支持 dark / light
    "enablePullDownRefresh": true,//是否开启当前页面下拉刷新。
    "onReachBottomDistance": 50,//页面上拉触底事件触发时距页面底部距离,单位为px。
    "usingComponents": {}//页面自定义组件配置
    }

    2.4、认识wxml


    {{isBlock}}
    {{isBlock}}
    //块元素
    //行内元素
    //有默认样式
    //富文本使用div span 等
    Page({
    data:{
    isBlock:true,
    nodes: [{
    name: 'div',
    attrs: {
    class: 'div_class',
    },
    children: [{
    type: 'text',
    text: 'Hello VIPKID的小伙伴!'
    }]
    }]
    }
    })

    2.6、如何使用webView

    承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用

      

    2.7、小程序运行机制 (冷启动、热启动、销毁时机)

    冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。

    热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。

    小程序销毁

    需要注意的是:只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

    当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)小程序会被微信主动销毁。

    当小程序占用系统资源过高,可能会被系统销毁或被微信客户端主动回收。

    前台/后台状态

    当用户点击右上角胶囊按钮关闭小程序,或者按了设备Home键离开微信时,小程序并没有直接销毁,而是进入了后台状态;当用户再次进入微信或再次打开小程序,小程序又会从后台进入前台。

    2.8、小程序路由

    wx.navigateTo

    保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

    wx.redirectTo

    关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

    wx.reLaunch

    关闭所有页面,打开到应用内的某个页面。

    wx.switchTab

    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

    wx.navigateBack

    关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

    使用方法

    //wxml里标签跳转
    navigate
    redirect
    switchTab
    reLaunch
    navigateBack

    //js 跳转

    wx.redirectTo,wx.reLaunch,wx.switchTab,wx.navigateTo({
    url:'/pages/webView/webView?xxx=1'//需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'(需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。)
    },
    success: function(res) {
    },
    fail: function(res) {
    },
    complete:function(res) {
    },
    })

    wx.navigateBack({
    delta: 1// 返回的页面数,如果 delta 大于现有页面数,则返回到首页
    })

    2.9、如何发布小程序(查看开发版、体验版本)小程序更新机制

    微信查找小程序开发助手、里面会有关联你所有小程序

    0fbfaec4d0b297785c3cd22f1c4bd6b4.png

    查找小程序开发助手.jpg

    找到对应的小程序查看开发版本、体验版本、线上版本。有不同的入口

    eb8adbc9fa76c1f0301741e462ce1692.png

    小程序查看版本.jpg

    找到小程序公众平台后台管理、版本管理进行修改开发版本、体验版、审核版本、发布版本

    ea02be4d9e0ae0222bed56cbb8aa491f.png

    版本发布.png

    小程序冷启动时,如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。

    const updateManager = wx.getUpdateManager()

    updateManager.onCheckForUpdate(function (res) {
    // 请求完新版本信息的回调
    console.log(res.hasUpdate)
    })

    updateManager.onUpdateReady(function () {
    wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好,是否重启应用?',
    success(res) {
    if (res.confirm) {
    // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
    updateManager.applyUpdate()
    }
    }
    })
    })

    updateManager.onUpdateFailed(function () {
    // 新版本下载失败
    })

    三、彩蛋(福利 用vue、react开发小程序)

    vue也能开发 多端开发使用小程序(微信、支付宝、头条、抖音、h5)框架

    kbone:  https://github.com/Tencent/kbone

    mpvue:  http://mpvue.com/#_2

    uniapp:  https://uniapp.dcloud.io/

    taro:  https://taro.aotu.io/

    wepy:  https://wepyjs.github.io/wepy-docs/


    作者:MicKing_9982
    链接:https://www.jianshu.com/p/8fba371e1ffa
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 微信小程序开发入门

    2017-02-27 11:56:00
    这是一个微信提供的自己的开发工具,相当于xcode吧,由此也可以看出腾讯的野心并不啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择iPhone各种型号或者安卓各种型号,在往后这就是目录结构了。...

    微信小程序

    首先说下结构吧,看看小程序到底长什么样子

    这是一个微信提供的自己的开发工具,相当于xcode吧,由此也可以看出腾讯的野心并不小啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择iPhone各种型号或者安卓各种型号,在往后这就是目录结构了。

    先说一下小程序的代码结构吧,首先他的app service 至少由这三个文件组成,app.js,这个是脚本代码,App()函数就在这里面实现,可以监听处理小程序的生命周期函数,声明全局变量。app.json json文件这个一般都是对程序进行配置的,这里面一般都是放pages页面组成啊,还有window或者其他页面的样式 颜色等。app.wxss,这个就是一个style sheet,样式表,你如果不想在自己的pages中单独的声明一些样式,可以直接使用这里的。

    然后除了系统提供的,我们要想开发小程序肯定要创建自己的页面,每个自己的页面都有四个文件index.js index.json index.wxml ,index.wxss。

     

     

    那这些文件里到底都有些什么呢 ,下面看图:

    index.wxss 就想成css吧,其实就是样式表 什么color marin padding width height  这些

     

    这个就是index.json 没什么太大的作用 就是一些配置信息 

     

    这个就比较重要了 index.js 就是一些监听函数或者自定义函数 和page 的注册等

     

    这个就是index.wxml  就相当于html 看这样子就觉得长得挺像,就负责页面具体长什么样子,由一些控件节点堆成的,里面绑定数据和函数

     

    小程序并不是web view,不是H5的界面,是一种类似react-native 的用JS和类XML结构写的接近于原生的app

    小程序的开发框架的目标是通过尽可能简单,高效的方式让开发者可以在微信中开发具有原生APP体验的服务

    框架提供了自己的视图层描述语言wxml和wxss ,就类似于HTML 和CSS,以及基于JavaScript的逻辑层框架,并在视图层和逻辑层间提供了数据传输和事件系统,可以让开发者方便的聚焦于数据与逻辑之上。

    框架的核心是一个响应的数据绑定,这点和native的MVC MVVM 和react-native的state,props等数据绑定响应绑定一样的,框架都是让数据与视图尽可能简单的保持同步,当数据发生改变时,只需要在逻辑层修改数据,视图层就会自动的响应更新。可以通过下面一个例子来看:

    // this is our view 

    <view> Hello {{name}} </view>  // 是不是感觉很像HTML的写法呢,别急下面的更像

    <button bindtap=“changeName”>click me </button> 这其实就是一个按钮挂接一个function ,函数名称叫changeName,按钮的标题叫click me

    //  this is  app service

    var helloData = {

    name:“world”

    }

    // page 是一个函数,注册一个页面,主要是当前页面的一些方法和数据绑定,接收一个object参数,指定页面的初始数据data,生命周期函数,事件处理函数,生命周期函数有onLoad 页面加载 ,onShow 页面显示,onReady 页面展示完成,onHide 页面隐藏,onUnload 页面卸载

    Page({

    data:helloData,

    changeName:function(e){

    this.setData({

    name:”bob”

    })

    }  })

     

    app.js 小程序的脚本文件  可以在这个文件中处理小程序的生命周期函数,声明全局变量。调用API

    app.json  是对整个小程序的全局配置,可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条的样式,配置默认标题,该文件不可添加任何注释

    app.wxss 是小程序的公共样式表,我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则

    每一个小程序页面都是由4个不同的后缀文件的组成如:index.js index.wxml  index.json index.wxss,微信小程序的每一个页面的【路径+页面名】(page/component/index)都要写在app.json文件中的pages里面,且pages中的第一个页面是小程序的首页

    作用域:在JS文件中声明的变量和函数只在该文件中有效,不同文件中可以声明相同名字的变量和函数,不会相互影响 

    通过全局函数 getApp()可以获取全局的应用实例,如果需要全局的数据可以在app.js的APP()函数中设置如:

    App({

    globalData:1

    }) // app.js

    var app = getApp()

    app.globalData ++ // a.js

    模块化 

    将一些公共的代码抽离成一个单独的js 文件作为一个模块,模块只有通过module.exports 或者exports才能对外暴露接口,这点很js 

    // common .js

    function sayHello(name){

    console.log(‘hello$(name)’)

    }

    module.exports.sayHello = sayHello

    在需要使用这些模块的文件中,使用require(path)将公共代码引入

    var common = require(‘common.js’)

    Page({

    helloCommon:function(){

    common.sayHello(‘hello’)

    }

    })

     

    App() 函数用来注册一个小程序,只能在app.js中注册,且只能注册一次

    在App()函数中不要调用getApp(),使用this即可拿到实例

    不要在onLaunch的时候调用getCurrentPage()这时候page还没有生成

    通过getApp()获取到小程序的实例后不要私自调用生命周期函数

    // app.js

    App({

      onLaunch: function() { 

        // Do something initial when launch.

      },

      onShow: function() {

          // Do something when show.

      },

      onHide: function() {

          // Do something when hide.

      },

      onError: function(msg) {

        console.log(msg)

      },

      globalData: 'I am global data'

    })

    // other.js

    var appInstance = getApp()

    console.log(appInstance.globalData)

     Page

    Page() 函数用来注册一个页面,接受一个object参数,其指定页面的初始数据,生命周期函数,事件处理函数

    通常在一个页面的index.js 下

    Page({

      data: {

        text: "This is page data."

      },

      onLoad: function(options) {

        // Do some initialize when page load.

      },

      onReady: function() {

        // Do something when page ready.

      },

      onShow: function() {

        // Do something when page show.

      },

      onHide: function() {

        // Do something when page hide.

      },

      onUnload: function() {

        // Do something when page close.

      },

      onPullDownRefresh: function() {

        // Do something when pull down.

      },

      onReachBottom: function() {

        // Do something when page reach bottom.

      },

      onShareAppMessage: function () {

       // return custom share data when user share.

      },

      // Event handler.

      viewTap: function() {

        this.setData({

          text: 'Set some data for updating view.'

        })

      },

      customData: {

        hi: 'MINA'

      }

    })

     

    初始化数据

    初始化数据将作为页面的第一次渲染,data将会以json 的形式由逻辑层传至渲染层,渲染层可以通过wxml对数据进行绑定

    <view>{{text}}</view>

    <view>{{array[0].msg}}</view>

    Page({

      data: {

        text: 'init data',

        array: [{msg: '1'}, {msg: '2'}]

      }

    })

     

    setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的this.data 的值

    直接修改this.data的值无效,这点有点类似this.setState,无法改变页面的状态,还会造成数据的不一致

     

    index.wxml 是页面的结构文件

    <view class="container">

      <view  bindtap="bindViewTap" class="userinfo">

        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

        <text class="userinfo-nickname">{{userInfo.nickName}}</text>

      </view>

      <view class="usermotto">

        <text class="user-motto">{{motto}}</text>

      </view>

    </view>

    本例中使用了<view/> <image/><text/>来搭建页面结构,绑定数据和交互处理函数

    index.js  是页面的脚本文件,在这个文件中可以监听并处理页面的生命周期函数,获取小程序实例,声明并处理数据,响应页面交互事件等

    //获取应用实例

    var app = getApp()

    Page({

      data: {

        motto: 'Hello World',

        userInfo: {}

      },

      //事件处理函数

      bindViewTap: function() {

        wx.navigateTo({

          url: '../logs/logs'

        })

      },

      onLoad: function () {

        console.log('onLoad')

        var that = this

        //调用应用实例的方法获取全局数据

        app.getUserInfo(function(userInfo){

          //更新数据

          that.setData({

            userInfo:userInfo

          })

        })

      }

    })

     

    index.wxss 是页面的样式表 采用的是flex布局

    .userinfo {

      display: flex;

      flex-direction: column;

      align-items: center;

    }

     

    .userinfo-avatar {

      width: 128rpx;

      height: 128rpx;

      margin: 20rpx;

      border-radius: 50%;

    }

     

    .userinfo-nickname {

      color: #aaa;

    }

     

    .usermotto {

      margin-top: 200px;

    }

     

    当页面有自己的样式表时,会覆盖app.wxss中的样式,如果不指定页面的样式表,可以在页面的结构文件中直接使用app.wxss中指定的样式规则

    index.json 也是非必要的,当页面有自己的配置文件时会覆盖在app.json中的相同的配置项,如果没有指定的页面配置文件,则在该页面直接使用app.json 中的默认配置

     

    逻辑层

    小程序的逻辑层是由JS编写,由于并不是运行在浏览器上,所以在web上的一些能力都无法使用,如document,window等

    增加App Page函数,进行程序和页面的注册

    增加getApp 和 getCurrentPages方法,分别用来获取当前的APP实例和当前的页面栈

    每个页面有独立的作用域,并提供模块化能力

    开发者写的所有代码最终会打包成一份javaScript代码,在小程序启动的时候运行,直到小程序销毁

     

    数据绑定

    WXML中的动态数据均来自对应page的data

    简单绑定 用双大括号将变量括起来 如:<view> {{message}} </view>

    Page({

    data:{

    message:’hello world’

    }

    })

     

    组件属性 需要在双引号之内

    <view id=“item -{{id}}”></view>

    Page({

    data:{id:0} })

    控制属性 需要在双引号之内

    <view wx:if=“{{condition}}”> </view>

    Page({ data:{condition:true} })

    关键字需要写在双引号之间  <checkbox checked=“{{false}}” </checkbox>

    运算  可在{{}}内进行简单的运算 三元运算 算数运算 逻辑判断  字符串运算  数据路径计算 数组 对象

    条件渲染

    在框架中可以用 wx:if=“{condition}” 来判断是否需要渲染该代码块

    列表渲染

    在组件中使用wx:for 控制属性绑定一个数组,即可使用数组中的各项的数据重复渲染该组件

    默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 

    <view wx:for=“{{}array}”>

    {{index}}:{{item.message}}

    </view>

    Page({

    data:{

    array:[{

    message:’foo’,

    }, {

    message:’bar’,

    }]

    }

    })

    使用wx:for-item可以指定数组当前元素的变量名 使用wx:for-index 可以指定数组当前下标的变量名

    模板 template

    可以在模板中定义代码片段,然后在不同的地方调用

    定义模板 使用name 属性作为模板的名字

    <template name=“”msgItem>

    <view>

    <text>{{index}}:{{msg }}</text>

    <text>Time:{{time}}</text>

    </view>

    </template>

    使用is属性,声明需要使用的模板,然后将模板的data传入

    <template is=“msgItem” data=“{{…item}}”/>

    Page({

    data:{

    item:{

    index:0,

    msg:’this is  a template’,

    time:’2016-06-06’

    }

    }

    })

    is 属性可以使用双引号语法来动态决定具体需要渲染哪个模板

    <template name=“old”>

    <view>odd</view>

    </template>

    <template name=“even”>

    <view>even</view>

    </template>

    <block wx:for=“{{[1,2,3,4,5]}}”>

    <remplate is=“{{item%2 ==0 ? ‘even’ : ‘odd’}}”>

    </block>

    模板拥有自己的作用域,只能使用data传入的数据

     

    事件

    在组件上绑定一个事件处理函数,如bindtap,当用户点击该组件的时候会在该页面对应的page中找到对应的事件处理函数

    <view id =“tapTest” data-hi=“wechat” bindtap=“tapName”>click me </view>

    在相应的page中定义事件处理函数参数是event

    Page({

    tapName:function(event){

    consol.log(event)

    }

    })

     

    转载于:https://www.cnblogs.com/ChrisZhou666/p/6473112.html

    展开全文
  • 这篇主要是一些小程序安卓原生APP对比做一个快速的入门。 后面几天也会更新一些小程序生命周期、异步操作、canvas画图这些我自己在开发中觉得可以拿出来讲讲的东西。 至于详细的API函数这里不会太多的去讲,微信...

    最近接了个小程序的活差不多快完结了所以写一下顺便总结
    也想更系统化给自己过一遍

    写在前面

    • 这篇主要是一些小程序和安卓原生APP对比做一个快速的入门。
    • 后面几天也会更新一些小程序生命周期、异步操作、canvas画图这些我自己在开发中觉得可以拿出来讲讲的东西。
    • 至于详细的API函数这里不会太多的去讲,微信官方文档十分完善而且现在更新频繁这里建议还是以官方文档为主,至于API可以做些什么所有的能力都在小程序示例这个小程序里有所体现(和PM撕*必备
    • 最后会总结一些坑点和值得注意的地方(多半是吐槽
    • 文中所有的IDE都是指微信开发工具中文实在是太长了 在此说明

    WXSS WXML JS (JSON)

    页面文件结构我认为这是最基础的东西拿来一块儿讲
    上面的4种代码文件构成了一个页面具体如图

    因为我不是前端开发者 一开始并不清楚 前面三个去百度只会给你讲

    HTML是骨架 CSS是外表 JS是灵魂

    emmmm...还是不懂对吧,不懂就对了,其实理解之后发现这样说是完全正确的,只是太抽象不太适合新手理解。
    这里有一个针对Android开发者的栗子

    WXML -> layout.xml WXSS -> style.xml JS -> JAVA.class

    这样会不会清楚一些 但是这只是一个方便理解东西并不能完全类比下面将详细介绍
    对了 这里不会对WXML与HTML CSS与WXSS做对比
    还是那个原因 我不会WEB前端 并不能准确的去对比

    所以下面也是从一个安卓开发者的角度去讲标题的4件东西

    WXML

    在我看来它是一个自带Databinding的LAYOUT文件

    首先基础功能 在这里去选取控件 注意这里使用是选取
    关于控件的具体大小尺寸位置在HTML+CSS这个结构中大都是建议去CSS文件里完成的
    直接在WXML文件中去添加也是可以的 写在style里面也可以
    但是IDE不会智能补全提示代码

    magrin? margin? emmm 有点痛苦

    和Android不太一样 需要注意
    但是路径 事件 组件特殊属性 只能在WXML里面生效
    这些写在WXSS里面不会报错 但也没有效果
    比如 image 的 src 路径

    <image src="{{item.avatar}}"  class="avater"></image>
    复制代码

    在WXML里说明的这些属性 IDE也是会有提示的
    (随口吐槽 特殊属性open-type属性在我写下这篇的时候WXML依旧没有提示)

    然后是数据绑定
    WXML拥有一定的函数能力可以自己解析JSON wx:if wx:elif wx:else wx:for (建议去官方文档查看有充足的例子很详细)
    加上小程序是天生带Databinding的数据与界面直接绑定 刷新数据就可以直接刷新页面
    这个比单纯的layout文件就强多了 其实比安卓的Databinding框架也更简洁
    这样就直接加快了开发速度 举个栗子
    JS code

    Page({
      data: {
        name : 'Leo7723"'
      },
      ...
    复制代码

    WXML

    <text class='text-24px'>{{name}}</text>
    复制代码

    双括号内写上变量名就可以直接绑定了 后续刷新 在js里面改变data的name值就可以直接刷新页面 这里给一个组件列表

    WXSS

    花样百出的STYLE文件
    在WXML里的classs属性里面去具体调用
    之所以说花样百出,真的很佩服前端的CSS
    除了正常操作 位置大小颜色
    CSS还控制整体布局方式 甚至可以画图 比如箭头
    WXSS的单位是rpx 配适都是自动的

    其次重要的是flex布局 点击这里有详细教程
    关于CSS不太常用的属性类型其实还有很多而且很杂
    但是sketch的代码提示 (对就是那个对于安卓开发没什么用的代码提示)
    对于前端是十分有用的 我的CSS代码基本靠它 (但是系统学习CSS也很重要 严肃脸)
    所以我觉得学会flex类和box类这俩特殊的 基本上就可以开发了
    着重说一下的是在具体使用上自己对于CSS文件和HTML里面style属性的理解顺便给一个小tip
    这两者都可以加载CSS属性 你可以在CSS里面书写在HTML里面通过class属性去应用
    也可以直接把属性写在HTML的style属性里面
    其实对于复用频率不高的一组设计是没什么问题的 在CSS文件书写可以精简HTML代码
    而且IDE还有代码提示
    但是试想一下 对于字体这种复用频繁的就不是很合适了 举个栗子

    .text-72px{
      font-size: 72rpx;
      color: black;
      font-weight: bold;
      margin-top: 8rpx;
    }
    复制代码

    当一个页面有好几个文字都是72rpx 但是他们的位置 比如margin属性 各不相同
    这样为了更好的复用 (偷懒)
    那么margin属性是明显应该更合适的放在HTML的style里面而不是写在CSS里面
    这只是一个小的tip
    为了更好的复用 (偷懒) 你也可以像安卓一样弄一个text.css 在具体的地方去
    @import "text.css";
    还不是美滋滋

    JS & JSON

    JS没什么好说的ES5和ES6都适用 IDE自带转码
    在生命周期函数类调用自己的代码就可以了
    关于这个JSON文件
    这个里面可以规定当前页面的 标题 顶部颜色 等 具体点击
    小程序JSON
    注意一点链接给的window里面的属性才可具体用于某一页面
    页面里没有定义会继承APP的定义

    {
    	"navigationBarTitleText": "main"
    }
    复制代码

    本来还想写多一点 写着写着饿了 分P好了 下次时间接着总结 先立FLAG

    展开全文
  • Kotlin程序开发入门

    2017-09-01 02:22:05
    于此同时,Kotlin语言一出就上了各大IT门户网站的头条,百度搜索达到300万条,今天编带你了解一下Kotlin,并推荐一本Kotlin入门书《Kotlin程序开发入门精要》。本文摘自人民邮电出版社异步社区《Kotlin程序开发...



     谷歌在17年举行的I/O开发者大会上宣布,将Kotlin语言作为安卓开发的一级编程语言。于此同时,Kotlin语言一出就上了各大IT门户网站的头条,百度搜索达到300万条,今天小编带你了解一下Kotlin,并推荐一本Kotlin入门书《Kotlin程序开发入门精要》




    本文摘自人民邮电出版社异步社区《Kotlin程序开发入门精要》
    试读:www.epubit.com.cn/book/detail…
    购书:item.jd.com/12174925.ht…


    Kotlin是什么?



          可能很多读者看到Kotlin这个单词会感到很陌生,这很正常。就和2007年以前一样,在苹果公司推出iPhone以及相应的开发工具之前,Objective-C就鲜为人知,至少在国内是这样的。上面提到的Objective-C是一种编程语言,而本书的主题是Kotlin,那么首先要回答的是,Kotlin到底是什么呢?没错,Kotlin和Objective-C一样,是一种编程语言。



          Kotlin是由JetBrains创建的基于JVM的编程语言,那么JetBrains又是什么呢?我相信很多Java程序员使用过IntelliJ IDEA,这个非常棒的Java IDE(集成开发环境)就是JetBrains的杰作。如果你没听过或没用过IntelliJ
    IDE,那么也没有太大关系。相信阅读本书的读者或多或少都了解一些Android的知识,Android官方推荐的IDE是Android Studio,简称AS。这个IDE就是基于IntelliJ IDEA社区版开发的。JetBrains旗下不只有IntelliJ IDEA一款产品,Kotlin也是JetBrains旗下的一款产品,一种编程语言。这种编程语言运行在JVM上,也就是Kotlin编译器会将Kotlin源代码编译成Java Byte Code(Java字节码),可以直接运行在JVM上。从这一点看出,在技术层面,Java和Kotlin是同一个级别的,都以Java
    Byte Code形式运行在JVM上。当然,Kotlin编译器还可以将Kotlin源代码编译生成JavaScript代码,以便在没有JVM的情况下运行。在未来,Kotlin编译器还可以将Kotlin源代码编译生成本地代码,完全脱离任何虚拟机运行,也就是说,Kotlin相对Java的优势之一是多目标编译语言,而Java只能编译生成Java Byte Code(.class文件)。



    为什么Kotlin突然成为热门?



          尽管Kotlin已经推出有很长一段时间了,但并不怎么出名,可能是因为JetBrains对它的推广力度不够,加之现在的编程语言实在太多了,所以Kotlin就像一块石头扔进了大海,不见了踪影。



          那么为什么现在Kotlin突然成为热门了呢?原因也很简单,Kotlin可以开发Android App,而且被Google公司选为开发Android App的一级语言,即在Android Studio 3.0及以上版本中会支持利用Kotlin语言开发Android App。这也就意味着,到目前为止,开发Android
    本地App可以使用Java和Kotlin两种编程语言。这就很像开发iOS App的场景了,可以使用Objective-C和Swift两种语言开发iOS App。因此,很多人把Kotlin比作Android世界的Swift。而且Kotlin和Swift的确都是很棒的编程语言,都加入了很多“语法糖”,可以大幅提高程序开发的效率。



    Kotlin相对于Java有哪些优势?



          可能很多读者会问,既然有了Java,为什么Google公司还要选择Kotlin来开发Android App呢?Kotlin相比Java有哪些优势呢?



          在这一节我们来简单了解一下Kotlin的特点,通过这些介绍,我们可以体会到Kotlin的优势所在。





    • 更容易学习:Kotlin是一门包含很多函数式编程思想的面向对象编程语言,而且相比Scala语言更容易学习。




    • 轻量级:相比其他编程语言,Kotlin函数库更小。由于Android存在65K方法数限制,使得这一点显得更为重要。虽然使用ProGuard或者打包成多个dex能够解决这个问题,但是所有这些解决方案都会提高复杂性,并增加调试的时间。Kotlin函数库方法数小于7000个,相当于support-v4(Android
      1.6)的大小。




    • 高度可互操作性:Kotlin可以和其他Java类库友好且简单地进行互操作。Kotlin团队在开发这门新语言时正是秉承了这个中心思想。他们希望可以使用Kotlin继续开发现有的使用Java语言编写的工程,而不是重写所有代码。因此,Kotlin需要能够和Java很好地进行互操作。




    • 非常好地集成Android Studio及Gradle:Kotlin有一个专门用于Android Studio的插件,以及另一个专门用于Gradle的插件。而且即将推出的Android Studio 3.0已经集成了Kotlin,因此在Android工程中开始使用Kotlin并不困难。




          当然,Kotlin还有很多语法层面的特性,如数据模型类、空类型安全、扩展函数等,这些技术将会在后面的章节介绍中展开。



    Kotlin能做什么?



          从前面的内容可以知道,Kotlin可以用来开发Android App,那么除了Android App,Kotlin还可以做什么呢?在本节我们就来一窥究竟。



    1.服务端开发



          既然Kotlin是基于JVM的编程语言,那么自然而然就可以使用所有基于JVM的服务端框架。下面是几个Kotlin官方文档推荐的框架。





    • Spring:一种开源框架,是为了解决企业应用程序开发复杂性问题而创建的。从Spring 5开始,Spring就已经支持Kotlin的新特性了,并可以使用Spring在线生成器(start.spring.io)生成基于Kotlin的工程。




    • Vert.x:用于建立基于JVM的响应式Web应用的框架。




    • Ktor:由JetBrains发布的一款基于Kotlin的本地Web框架




    • kotlinx.html:是一种DSL(领域专用语言),用于在Web应用中生成HTML。Kotlin服务端框架和kotlinx.html的关系就像JSP和FreeMarker的关系一样,FreeMarker是基于Java的模板引擎。使用FreeMarker,可以不依赖于HTML或其他技术,可以根据需要生成HTML或其他东西,也就是一种与具体渲染技术无关的技术。




    2.以JavaScript方式运行



         Kotlin提供了生成JavaScript源代码的能力,也就是将Kotlin代码直接转换为JavaScript代码。目前,支持ECMAScript 5.1标准,未来会支持ECMAScript 6。



          注意,如果将Kotlin代码转换为JavaScript代码,在Kotlin代码中只能包含Kotlin标准库,不能包含任何JDK API以及任何第三方的Java Library API,任何不属于Kotlin本身(Kotlin语句和标准库)的部分在转换的过程中将被忽略。



    3.开发Android App



           这一部分在上文提到过,Kotlin和Java一样,都可以开发Android App,而且Kotlin和Java源代码文件可以在同一个工程中,可以联合进行调试。



          尽管Kotlin能做很多事(Java能做的,Kotlin都能做),但本书的主要关注点是开发Android App,因此,在本书后续部分将着重介绍如何利用Kotlin开发Android App。





    Kotlin入门,怎么学?



    一本全程视频陪伴贴心跟踪初学者学习效果的Kotlin开发书



    《Kotlin程序开发入门精要》







    点击图片查看详情)



    编辑推荐



    1基于最新的Kotlin版本



    2本书分为三部分:Kotlin基础、Android开发和项目实战,读者通过对本书的学习,不仅可以掌握Kotlin的知识,还可以将Kotlin用于项目实战。



    3赠送近70小时视频课程,包括Kotlin和Android,供初学者学习使用



    4通过极客题库提供大量的测试题以及过关斩将系统,读者可以用通关的方式更有效地学习书中的知识



    5随书赠送价值300元优惠卡,可以用于购买李宁老师其他视频课程以及现在及未来提供的其他服务



    6有问题的学员可以通过欧瑞科技(创始人是李宁)的问答社区区(geekori.com提问,会有专人回答读者提出的问题,以及通过博客系统总结书中学到的知识,同时,提出问题、回答问题以及撰写的博客越多,就会增加读者的积分,以后学习李宁老师其他的课程和获取其他资源,会有更大的优惠。



    仅仅一本书怎么行?海量视频、海量习题快速入门























    更多Android类好书,扫码查看















    展开全文
  • 同学们大家好,我是伊同学,上一节我们学习了API的类型和语法结构,那么今天我们一起来看一下常用的API都有哪些。 首先,我们来看界面交互的api。 第一种,我们先来看消息提示框,调用成功后的样子如图所示。实现...
  • app,微信小程序,支付宝小程序开发入门 说明: 开发用的是uni-app,开发者之前有过vue,小程序开发,可快速上手, 后端接口用python开发,之前也有过php,node.js开发的接口 uni-app是一个使用Vue.js开发跨平台个人...
  • 笔者最近学了一点安卓开发,装好环境之后,想上网找一找有木有入门案例,能让我快速了解安卓开发的大概流程,如布局文件在哪,怎么引入;java类写在哪,如何声明等等一系列特别提别基础的东西。找了好久,发现...
  • 前言 许多 Android 开发者经常会问我,要学会哪些东西才能成为一个优秀的 Android 工程师?对于这个问题,他们的描述或多或少都有些差异,但是,...因此,在本文中,我将分享我在 Android 开发中所使用到的重要技能,
  • 这是一个简单的安卓浏览器,但是安装到手机后无法搜索。代码如下: android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > android:id="@+...
  • 一个蓝牙4.0BLE安卓开发例子,适合新手入门学习.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 包子不才,在空余的时候研究着小程序 刚开始接触小程序的时候,觉得非常的神秘。然而是我想多了,依据我浅薄的经验感觉,小程序使用感不如APP。小程序有很多东西限制的非常的死 ...比如说,小程序安卓...
  • 同学们大家好,我是伊同学,上一节我们学习了API的类型和语法结构,那么今天我们一起来看一下常用的API都有哪些。 首先,我们来看界面交互的api。 第一种,我们先来看消息提示框,调用成功后的...
  • 一、【安卓手机自适应draw9patch不失真背景】实际问题 前一段时间,去长江玩了一趟,拍了很多照片,不过都是手机拍的,正常尺寸都是看不清楚老婆的脸蛋,就不自在的开始放大放,可是一定程度图片就失真了。不知道...
  • Android没凉,只是比以前难混了 多年前Android异军突起,成了新的万亿...Android入门相对简单,初级Android很多很多,趋近饱和,你随意打开一个招聘app就能很直观的判断出来,现在Android准入的条件越来越高了。 目录
  • 春招已经接近尾声了,不知道各位伙伴有没有找到自己心仪的工作呢。 笔者前几天内推刚刚收获了腾讯高级开发岗的offer,得益于内推朋友面试时的面试经验,照着他给的方向复习刷题,顺利的通过了面试。在这里也无偿...
  • 微信小程序-入门篇(app.json)

    千次阅读 2017-08-07 16:05:03
    安卓的建议看看微信的小程序,工作之余能陶冶下自己的情操,啊废话不多说了上干货。 1.整好开发工具配置后映入眼帘的是三个文件 app.js app.json app.wxss 1.1 我们先看看app.json 它有四个节点 pages,tabBar...
  • 微信小程序入门Demo(石头剪刀布)

    千次阅读 2016-10-21 13:39:47
    前言:这是本人第一次写博客,希望对和我一样刚入门微信小程序的新手们有所帮助。因为本人主要做安卓开发,对web前端知识也只是用了一天时间恶补了下。对于微信小程序,我会由浅入深,和大家一起多总结多学习。 还...
  • 微信小程序已经火了好一段时间了,个人觉得学习成本比较低,如果你有Web前端开发的经验,这应该算是小儿科的事了,然而对于我这样的安卓开发者来说,移动端的小程序,貌似在界面上还是比较麻烦的,css毕竟还是比较让...
  • 一直从事安卓开发,前不久公司突然让我研究一下微信小程序。微信小程序的需求现在越来越多了,各种大小公司现在一开口就是来给我做个小程序,微信小程序以其“即用即走”的超便利特性受到越来越多用户的青睐,毕竟...
  • Android Studio入门到放弃 经过一系列的折磨,终于创建出来Android项目了 下面说说我从零创建app程序的Android Studio配置 安装SDK版本 SDK Tools的Android SDK Build-Tools 30-rC2版本,有什么用什么,要和那个...
  • 小程序开发完成之后,我们需要在真机上进行测试,真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外,我们还可以使用真机远程调试,在 iOS 上可以通过实现 Safari 调试...
  • 微信小程序教学视频

    万次阅读 2016-10-12 09:42:03
    入门微信小程序开发 极客时间上有相关视频,可购买。不想花钱自己去官网学习就可以。 2019.4.24:小程序有时候运行速度会比原生要快,因为它是本地加载的,但是只适用于一些轻量级的应用。在某些场景下是有自己的...
  • 前言:为什么要进行前后端分离开发,我感觉这是一个哲学问题,django也提供了相应的模版,其实也是可以进行前后端不分离开发的,但是一个人的精力...不仅能把数据提供给前端,还可以把数据提供给安卓、IOS、小程序等。

空空如也

空空如也

1 2 3 4 5
收藏数 94
精华内容 37
关键字:

安卓小程序开发入门