查看: 173|回复: 0

    从零开始--微信小步伐开辟教程

    [复制链接]

    该用户从未签到

    5

    主题

    0

    帖子

    28

    积分

    实习版主

    Rank: 7Rank: 7Rank: 7

    积分
    28
    发表于 2017-12-27 19:07:19 | 显示全部楼层 |阅读模式
    从零开始小步伐
    本日一不警惕拿到了小步伐的内测资格,为了不苟嗌佗信团队的信托,我决定十一奋斗一把!不外话说我但是一个Android工程师啊!以是就让我们从零开始!
    以是本文非常得当非前端工程师学习!哈哈!都说小步伐出来前端会抢移动端饭碗,但是据我所知如今很多多少学习的都是移动开辟工程师,谁抢谁的还不肯定呢!
    PS:表问我怎么拿到小步伐内测资格的,有种东西叫内部资源!
    创建步伐实例
    变乱绑定函数
    更新界面数据
    预备工作
    IDE搭建
    就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程
    pgIGHhv4nIpVt4t4.jpg </img>
    图片发自简书App
    知识预备
    JavaScrip照旧要看看的,保举教程 廖雪峰大神的博客
    HTML+CSS 大概知道是干啥的就行
    从零开始
    微信小步伐中就四种范例的文件
    json -------- 项目设置文件,负责窗口颜色等等
    在根目次下用app来定名的这四中范例的文件,就是步伐入口文件。
    app.json
    必须要有这个文件,假如没有这个文件,IDE会报错,由于微信框架把这个作为设置文件入口,
    你只需创建这个文件,内里写个大括号就行
    以后我们会在这里对整个小步伐的全局设置。记载了页面构成,设置小步伐的窗口 配景色,设置导航条样式,设置默认标题。
    app.js
    必须要有这个文件,没有也是会报错!但是这个文件创建一下就行 什么都不必要写
    以后我们可以在这个文件中监听并处置惩罚小步伐的生命周期函数、声明全局变量。
    app.wxss
    这个文件不是必须的。由于它只是个全局CSS样式文件
    app.wxml
    这个也不是必须的,而且这个并不是指主界面哦~由于小步伐的主页面是靠在JSON文件中设置来决定的
    有了这两个文件你运行步伐,IDE就不会报错了,也意味着这是最简朴的微信小步伐
    V9l9l0KnxUz9k4hn.jpg </img>
    Paste_Image.png
    Hello World
    app.js文件管理整个步伐的生命周期,以是在内里添加如下代码:(输入App IDE会有提示)
    App({
    onLaunch: function () {
    console.log('App Launch')
    },
    onShow: function () {
    console.log('App Show')
    onHide: function () {
    console.log('App Hide')
    }
    })
    详细API表明如下
    Z00zA20Abp9E5cbb.jpg </img>
    美化ActionBar
    json文件负责设置ActionBar颜色,我们只必要在内里添加如下代码即可,下图有参数阐明!
    UBJj2hXUWbePmLvL.jpg </img>
    EJTYicJts0IpSGxY.jpg </img>
    {
    " window":{
    " navigationBarBackgroundColor": "#BBDEF8",
    " navigationBarTitleText": "Demo",
    " navigationBarTextStyle":"white"
    uL08Iis8CT0CSOoe.jpg </img>
    如今看ActionBar是不是像那么回事了!好接下来我们继承写我们第一个界面
    美化页面
    美化页面我们用到了 wxml 和 wxss文件
    为了步伐代码布局简便
    我们必要在跟目次下创建一个新文件夹 名字随意,我们这里叫pages
    然后在pages文件夹里再创建新文件夹 名字随意 这里我们叫 index
    然后我们创建index.wxml文件然后在内里写入以下代码
    Hello
    然后创建index.wxss文件然后在内里写入以下代码
    .window{
    color=#4995fa;
    然后我们创建 index.js文件
    在文件中输入如下代码(输入Page IDE会有提示)
    函数表明如下:
    jK7Qh3vr51Az6D1D.jpg </img>
    Json文件负责设置页面路径
    以是我们在内里参加如下代码
    此中index的寄义 实在就是指index.js文件
    这里必要阐明一点 pages 内里的路径实在是指向js文件的
    假如一个目次下没有该名称的js文件是会报错的!
    "pages":[
    " pages/index/index"
    ],
    完成了!我们来运行步伐!
    iisHrqs5IHOX5hou.jpg </img>
    超等Hello World
    为了学习变乱绑定,以及怎样将数据在页面上更新
    我们来做个超等Hello World,就是我点击笔墨,能让
    它变色!
    绑定变乱
    我们打开index.wxml 将内里代码改成如许
    实在也就是加了
    catchtap="click"
    这两个属性是什么意思呢 别发急 我会逐一表明
    CfFFNFLGQM1fUnlq.jpg </img>
    上图展示了变乱的一些的属性名称,这里必要留意红框标注起来的内容,区分出冒泡变乱和非冒泡变乱,实在冒泡变乱就是必要往上面一层容器通报这个变乱。
    看了这图 我们再来看 catchtap="click" 的寄义
    catch 代表非冒泡变乱
    tap 代表点击变乱
    以是连在一起就黑白冒泡点击变乱
    那背面谁人click是啥
    click 实在只是个变量名字
    我们在index.js必要用这个名字绑定吸收变乱的函数
    我们打开index.js
    然后添加如下函数
    click:function(){
    console.log("点击了笔墨");
    添加完子女码长如许 红框中就是 添加的这个代码
    Lo92Z7975Y5T9T5z.jpg </img>
    以是实在点击变乱的回调函数 就是 catchtap="click"
    中的 click 背面加上 :function() 构成的
    如今我们来运行步伐试试 然后点击笔墨
    l3mZHLHuP0iNfI93.jpg </img>
    看是不是调用了 click:function 函数 而且打出了log
    好接下来我们写点击一下变色的逻辑
    那怎样让一个笔墨变色呢,固然是css
    以是我们必要再index.wxss 中添加一个样式
    .window-red{
    color:#D23933;
    lxyh8LKh1zY10k8q.jpg </img>
    然后我们进入index.js文件
    你会发当代码内里有个 data:{} 它不是page生命周期函数
    实在他是个变量的数组,这个内里申请的变量都可以在 wxml中利用
    我们在这里申请一个color
    color的值就是index.wxss中的样式名称
    然后进入index.wxml中,将class中的值改成 {{color}}
    mzXT5fH0f5k33gO3.jpg </img>
    实在意思就是 将js文件中变量 color的值在这里利用
    也就是值即是 window
    然后我们再回到index.js文件
    在最上面申请一个变量控制点击
    然后在click:function() 函数中添加如下代码
    if(flag){
    color = "window-red";
    flag = false;
    }else{
    color = "window";
    flag = true;
    this.setData({
    color
    });
    修改完后的代码如图
    aVFvP9VRuorEp5pO.jpg </img>
    实在就是在点击是后 更换color变量的值 而更换的这个值实在就是样式的名称
    这里有个题目 我们更换完值 但是在wxml中不会立刻见效
    以是我们必要调用
    this.setData()方法将值同步给wxml 让它立刻见效
    好了我们运行步伐 点击Hello 看看是不是点一下 变一下颜色!
    Hs365CMUzo6Ob2JB.jpg </img>
    111111.gif
    末了再增补一点 index目次下也是可以设置 json文件的
    也就是每个页面都可以设置本身独特的actionbar颜色等等
    这里的设置会覆盖 app.json文件的设置
    末了附上github 地点 http://github.com/pwh0996/WXDemo.git
    末了由于发急睡觉 ,以是错别字比力多,背面整理望各人包涵



    上一篇:零加壹杨鹏博:“小步伐”下的“大生态”—微信将来会成为中国手机操纵体系?
    下一篇:微信上线“交际部12308”小步伐境外有事儿就找它
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|好站群 ( 苏ICP备15018248号-1

    GMT+8, 2018-5-22 21:45 , Processed in 0.122197 second(s), 48 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表