精华内容
下载资源
问答
  • 小程序入门教程

    2019-03-30 16:58:21
    13. WXML特性之数据绑定 数据绑定 Page对象的data属性 <!--index.wxml--> <text>{{message}} //index.js Page({ data: { ...29. 小程序事件流 ...微信小程序基础内容组件之icon 参考博客 [1]

    13. WXML特性之数据绑定

    数据绑定
    Page对象的data属性

    <!--index.wxml-->
    <view>
      <text>{{message}}</text>
    </view>
    
    //index.js
    Page({
      data: {
        message : "hello, word"
      },
    })
    

    在这里插入图片描述
    flag=false,不隐藏

    <!--index.wxml-->
    <view hidden='{{flag ? true : false}}'>
      hidden
    </view>
    
    //index.js
    Page({
      data: {
        flag: false
      },
    })
    
    

    在这里插入图片描述
    公共属性为
    在这里插入图片描述

    14. WXML特性之列表渲染

    <!--index.wxml-->
    <view>
      <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
        <view>{{index}}:{{item.name}}</view>
      </block>
    </view>
    
    //index.js
    Page({
      data: {
        items: [
          { name: "商品A"},
          { name: "商品B" },
          { name: "商品C" },
          { name: "商品D" }
        ]
      }
    })
    

    在这里插入图片描述

    15. WXML特性之条件渲染

    <!--index.wxml-->
    <view>今天吃什么?</view>
    <view wx:if="{{condition === 1}}">
      饺子
    </view>
    <view wx:elif="{{condition === 2}}">
      米饭
    </view>
    <view wx:else>
      面食
    </view>
    
    //index.js
    Page({
      data: {
        // 生成一个1到3的随机整数
        // Math.random()生成[0,1)的浮点随机数
        // Math.floor()下取整
        condition: Math.floor(Math.random() * 3 + 1)
      }
    })
    

    在这里插入图片描述

    16. WXML特性之模板及引用

    <!--index.wxml-->
    <template name="tempItem">
      <view>
        <view>收件人: {{name}}</view>
        <view>联系方式: {{phone}}</view>
        <view>地址: {{address}}</view>
      </view>
    </template>
    <template is="tempItem" data="{{...item}}"></template>
    
    //index.js
    Page({
      data: {
        item: {
          name: "张三",
          phone: "15515561556",
          address: "中国"
        }
      }
    })
    

    在这里插入图片描述
    文件引用
    import 引入目标文件中模板代码块的内容

    <!--index.wxml-->
    <import src="a.wxml"></import>
    <template is="a"></template>
    
    <!--a.wxml-->
    <view>Hello, word</view>
    <template name="a">
      Hello,wixin
    </template>
    

    在这里插入图片描述

    import有作用域的概念,避免死循环,只会引入模板中的内容,不会引入模块中的模板内容

    include 引入目标文件中除了模块代码块的所有内容

    <!--index.wxml-->
    <include src="a.wxml"></include>
    <template is="a"></template>
    
    <!--a.wxml-->
    <view>Hello, word</view>
    <template name="a">
      Hello,wixin
    </template>
    

    在这里插入图片描述

    19. WXSS特性之选择器

    在这里插入图片描述
    选择器的优先级
    在这里插入图片描述

    27. 生命周期

    在这里插入图片描述
    在这里插入图片描述

    29. 小程序事件流

    在这里插入图片描述
    在这里插入图片描述

    <!--index.wxml-->
    <view class='container-A' bindtap='clickA'>
      container-A
      <view class='container-B' bindtap='clickB'>
        container-B
        <view class='container-C' bindtap='clickC'>
          container-C
        </view>
      </view>
    </view>
    
    //index.js
    Page({
      clickA() {
        console.log('click container-A')
      },
      clickB() {
        console.log('click container-B')
      },
      clickC() {
        console.log('click container-C')
      }
    })
    

    微信小程序基础内容组件之icon

    参考博客

    [1]

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

    2020-09-01 04:27:02
    本篇文章主要介绍了微信小程序入门教程,现在分享给大家,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • 微信小程序入门教程+案例demo

    万次阅读 多人点赞 2016-10-31 23:25:21
    微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态,——微信小程序开发也就那么回事。你只需要一点点css(真的只要一点点)的基础就...

    微信小程序入门教程+案例demo

    尊重原创,转载请注明出处:原文查看惊喜更多 http://blog.csdn.net/qq137722697


    首先摆在好姿态,——微信小程序开发也就那么回事。你只需要一点点css(真的只要一点点)的基础就可以了。

    认清微信小程序开发

    其实,我觉得小程序就是将微信官方提供20+个基础组件(目前有26个)进行排列组合,然后加上一些css样式,对用户的操作进行反馈(调微信官方提供的60+个api)。26个基础组件+60个开放api=半天就搞定了吧?(认真跟着下面的教程走半天足够了)

    怎么学?

    1、开发工具你得有吧?

    这里是最新版下载链接(传送门)—>微信web开发者工具最新版下载地址

    目前微信小程序开发工具已经不需要破解都可以了,你只要使用手机端微信扫一扫登录开发工具,在创建应用的时候选择为无APPID就可以开发了。
    这里写图片描述

    2、开发文档得有吧?

    很多人可能觉得看视频要习惯点(CSDN学院的微信小程序实战视频),但是本人建议学新东西不要看视频,入门最好的方式就是看官方文档(还有什么谁比官方自己更懂自己的东西呢!),下面是官网地址:

    微信小程序官方文档(传送门)

    当然这里推荐看W3CSchool整理的文档,思路相对比较清晰。(再来个传送门

    3、基础会了,再来点实战

    学完一样东西,最好的方式就是将这个东西付诸于实践,下面进入实战《微信小程序之百思不得其姐(简版)》,如果你能全程跟着做出来,那么你就已经入门成功了。

    先看效果图

    这里写图片描述

    说明这个项目的IDEA是借鉴了这位大哥的,感谢这位大哥

    再来看看项目截图
    这里写图片描述

    具体的代码这里我不就贴了,我把整个项目打包直接下下来就可以用(点我下载DEMO)。

    我使用到的图标都是从阿里巴巴的iconfont下载的(之前不知道的简直就是非常大的福利哦,你用了就知道)。

    4、项目还不够?

    如果你觉得上面的实战还不够激发你的潜能,那么下面给出几个我在学习过程中找的IDEA,希望对你有帮助。

    1)、计算器
    https://github.com/dunizb/wxapp-sCalc

    2)、豆瓣图书
    http://www.jianshu.com/p/c35084200470

    3)、移动商城
    https://github.com/liuxuanqiang/wechat-weapp-mall

    4)、天气
    http://swiftcafe.io/2016/10/03/wx-weather-app/

    5)、空气质量查询
    http://blog.csdn.net/yulianlin/article/details/52692066

    6)、github客户端
    https://blog.zhengxiaowai.cc/post/weapp-demo.html

    7)、知乎日报
    http://www.apkbus.com/forum.php?mod=viewthread&tid=268626&extra=page%3D1%26filter%3Dsortid%26sortid%3D12


    最后

    感谢上面提到demo的作者们,共同进步……

    展开全文
  • 从零开始的微信小程序入门教程(一) 之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了。所以在还未正式写项目前,打算在空闲时间学习下小程序。本意是在学习过程中结合实践...

    从零开始的微信小程序入门教程(一)

    之前说要和同事一起开发个微信小程序项目,现在也在界面设计,功能定位等需求上开始实施了。所以在还未正式写项目前,打算在空闲时间学习下小程序。本意是在学习过程中结合实践整理出一个较为入门且不是很厚的教程,但也很难保证时间充裕能一直写下去。所以先开个头留个坑,那么本文开始先从小程序注册到创建第一个小程序说起:

    一、从注册开始

    要开发小程序自然要申请注册一个小程序,我们先进入微信公众平台注册账号(若有账号则直接登录)。

     

    因为微信公众号同时管理着订阅号,公众号以及小程序等多种账号,所以这里要选择小程序账号类型;记住,不同公众号服务之间账号不通用,所以使用注册的邮箱不能被其它公众号服务或者自己微信绑定过。

    可以看到上图中我最后注册的邮箱是新浪邮箱,因为我的QQ邮箱被自己微信绑定过了,无法再次使用。

    注册完成后登陆,就可以创建 自己的小程序了,这里不累赘,请按照提示依次填写小程序信息;在填写完成创建小程序后,我们可以得到一个小程序ID,就像每个人的身份证ID是独一无二一样,每个小程序也有独一ID,我们在后期小程序开发工具中会利用此ID开发你的小程序,所以这里需要留意一下这个东西。

    二、安装开发者工具

    前往官网下载微信小程序开发者工具,这里提供了三个版本,我下载了稳定版。双击安装,还是别建议默认装在C盘,强迫症。安装完成后双击启动软件,选择小程序;界面顶端有新建项目和导入项目两种,这里我们选择新建来到如下界面:

    项目名称:项目的名字,取个好听的,最好还是别取中文,这里我就叫demo-wechat。

    目录:项目存放目录,这里我就在D盘新建一个空的demo-wechat文件夹存放此项目。

    AppID:如果是开发我们创建的小程序这里就需要填写此ID,很明显我们处于学习阶段怎么上手就玩自己的小程序,这里使用测试号。

    开发模式:选择小程序。

    后端服务:暂时不会用到,选择不使用云服务。

    语言:这里我选择JavaScript,如果你习惯typescript,也可以换成此项。

    好了,点击创建按钮!正式开启我们第一个小程序。

    三、简单了解界面与基本文件

    1.界面入门介绍

    整个微信开发工具很像我们使用谷歌打开调试栏的状态,有很多熟悉的影子,我们一一说。

    在编辑器左上角可以看到模拟器、编辑器、调试器三个绿色按钮。它们分别对应了开发者工具的左侧,也就是实时预览区域;右上侧区域,我们日常开发写代码管理项目目录的地方;以及右下侧,调试区域。

    再往右一点,可以看到一个预览按钮,点击会提供了一个有效期限的二维码,我们可以通过微信扫码在手机端真实预览项目;以及右边的真机调试,也就是在手机上调试我们的项目。

    再往右边可以看到一个版本管理。如果我们的项目想多人同时开发,开发者工具这点就比较贴心,直接提供了初始化git仓库等功能,便于多人维护。

    再往下一栏,可以看到机型模型,网络模拟等选项,这些在谷歌控制台调试移动端使用也比较频繁。

    2.文件类型与部分文件说明

    除了开发者界面带来的新鲜感,我们也注意到小程序代码中的文件类型大致分为以下四种:

    .wxml:微信模板文件,类似网页开发的html文件。

    .wxss:微信样式表文件,用于定于页面样式。

    .js:脚本文件,代码逻辑写在这。

    .json:静态数据配置文件。

    我们根据小程序快速生成的目录结构分别说下不同文件的作用:

    app.json---小程序全局配置文件

    我们打开app.json文件,可以看到如下代码:

    {
      "pages":[ //页面数组
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light", //背景文本样式 可选light dark
        "navigationBarBackgroundColor": "#fff", //导航背景色,可定义任意颜色
        "navigationBarTitleText": "WeChat", //导航标题,可定义任意文本
        "navigationBarTextStyle":"black" //导航文本颜色,可选black white
      }
    }

    此文件主要管理小程序的全局配置,包括小程序页面路径,界面表现(标题,背景色,字体色),网络超时时间,底部tab等;

    这里开发者工具帮我们快速生成的配置只包含了pages字段与windows字段。

    pages字段用于描述小程序所有页面路径,注意,如果你删除了此字段中的某条路径,你得同步删除掉对应的页面文件夹。反之,增加页面也是如此。

    windows字段用于定于所有页面的顶部背景颜色,文字颜色,标题等,这是一个全局的配置,修改了所有页面都会生效。当然,我们可以在单个页面json配置中定义独特的风格用于覆盖全局配置,比如让每个页面的头部颜色都不一样。查看更详细的小程序配置

    这里我将windows字段配置修改了一部分,可以看到小程序界面发生了变化。(感觉挺好看...)

     project.config.json---开发者工具配置

    此文件用于定义开发者工具的个性化定制,比如界面颜色,编译配置等等。

    大家用过npm都知道下载三方库都会生成一个package.json文件,此文件记录了下载过得所有库名与版本信息,如果我们换了电脑,其实不用将之前下载的文件拷贝过去,而是只用拷贝一个package.json再次执行下载就可以复原你需要的三方库。

    那么project.config.json类似如此,它保存了你对于开发者工具的相关配置,如果你换电脑了,你可以通过此文件直接还原你最初习惯的开发设置。查看详细开发者工具配置

    wxml模板

    我们在前端开发中对页面布局使用的更多是div p span这样的标签去组成一个页面组件。微信小程序对此对标签进行了封装,虽然不能使用那些熟悉的标签,但微信小程序提供了更为方便的例如view,text等标签。

    除了标签变化,wxml还新增了例如wx:if类似的属性,用过angular,vue之类框架的同学应该马上联想到了;确实如此,微信小程序也推行了MVVM做法,我们只用关心数据层,当数据发生变化,通过数据绑定的做法,模板中的表达式以及wx:等属性来帮你实现视图变化。查看更详细的wxml语法

    wxss样式

     小程序中的样式表写法与网页开发类似,可以看到全局配置中和每个页面文件夹下都存在一个wxss文件,这点与json配置一样。我们可以在app.wxss中定义全局样式,而在页面下的wxss样式中定义此页面独有的页面。查看更详细的wxss规则

    四、部分注意点

    1.微信小程序与网页开发的区别

    我们都知道浏览器渲染层与逻辑层都由同一线程处理,所以会存在堵塞的情况;但微信小程序由不同线程处理,逻辑层在jscore中。---微信有不同的线程处理渲染与逻辑

    运行环境 逻辑层 渲染层
    iOS JavaScriptCore WKWebView
    android V8 chromium定制内核
    开发工具 NWJS Chrome WebView

    不同环境下小程序线程

    我们在网页开发中能方便操作dom bom,但微信小程序中没有完整的浏览器对象,所以无法操作dom,类似JQ的框架也无法正常运行。---不能操作dom,用不了JQ

    网页开发中我们常常通过mpn引入三方库,但jscore环境与nodejs不太相同,因此在网页开发中npm的包一部分在微信可能无法使用。

     2.关于添加页面

    pages文件夹下文的页面数量一定得与json中的pages字段数组对应,新增页面推荐做法是直接在pages数组中新增一条页面路径,保存后pages文件夹会自动生成一个新的页面,这样做更加方便和保险。

     

    可以看到新增一条路径,保存后自动新增了文件夹,非常方便。但我们删除pages字段中的某条路径时,文件夹不会自动删除,所以记住手动删除对应文件,保证两者是对应关系。

    3.注意json文件写法

    1.json文件都是被包裹在{}中,并以key-value方式展示。注意,key一定要加上双引号,没加双引号,或者加了单引号都会报错。

    2.其次,json的值只能是数字,字符串(需要加双引号),布尔值,数组(放在[]中),对象(放在{}中),或者null,不支持undefined以及其它数据结构,否则会报错。

    3.json文件中无法使用注释,添加任意注释都会引发报错。

    那么到这里,我们走完了注册小程序以及开发者工具安装流畅,并简单介绍了开发者工具界面,以及开发涉及的文件类型,以及文件作用,我们成功创建了一个小程序,虽然它很简单。

    展开全文
  • 支付宝小程序入门教程+案例demo

    万次阅读 2017-09-25 00:00:17
    支付宝小程序入门教程+案例demo 尊重原创,转载请注明出处 一、支付宝小程序开发工具你要有吧? 这里是最新版下载链接(传送门)—>支付宝小程序开发者工具最新版下载地址(win64/mac版) 目前...

    支付宝小程序入门教程+案例demo

    尊重原创,转载请注明出处

    支付宝小程序开发工具你要有吧?

    这里是最新版下载链接(传送门)—>支付宝小程序开发者工具最新版下载地址(win64/mac版)

    目前你只要使用手机端支付宝扫一扫登录开发工具,新建或打开已经准备好的代码包,填写申请的小程序APPID就可以开发了。 




    上传支付宝小程序版本

    开发完成后,在“开发者工具”IDE项目页面,填写小程序的APPID及版本号,点击上传。

    上传后的版本可以在开放平台上小程序详情中查看到该版本,一个小程序可以同时拥有多个开发版本。



    设置体验版(可选)
    如果在应用上架之前需要让部分用户先体验小程序,可以走体验版流程。
    1.    在成员管理中添加体验成员,一个小程序可以添加50个体验成员。
    2.    在开发管理中,选择一个开发版本设置为体验版。
    3.    让体验者扫体验二维码开始体验。

    提交审核
    IDE上传成功后,可以在开放平台的小程序应用详情页查看到上传的开发版本。
    在功能列表中查看并添加小程序用到的蚂蚁开放能力,功能如需签约(比如支付),请完成签约。
    选择开发版本,填写审核信息提审,审核将会在2个工作日完成。
    上架小程序
    审核通过后,管理员点击提交上架,就可以在支付宝客户端中查看该小程序了。


    如果还没有准备好代码包,可以参考一下:支付宝小程序官方的开发文档

    那么下面也给出几个我在学习过程收集的IDEA,希望对你有帮助。

    http://bbs.zhichiwangluo.com/thread-11520-1-1.html

    展开全文
  • 面对广大小白同学,进行小程序入门教程 1.打开微信小程序会出现这样的界面 1.给项目起一个名字,自己比较习惯用英文,不使用云开发 2.目录可以自己选择(首先应该新建一个空的项目文件夹,点击选择文件夹,点击新建...
  • 微信小程序运行机制、更新机制、事件机制。如何分包加载。生命周期等
  • 安装之后,和微信web开发者工具一样,扫码登录即可,不同的是,创建一个小程序需要填写AppID,如果没有AppID的话,点击‘无AppID’即可 (此图片来源于网络,如有侵权,请联系删除! ) 2.目录结构(此图片来源于网络,...
  • 微信小程序入门教程学习笔记

    千次阅读 多人点赞 2018-08-29 11:26:23
    作为一个刚刚入坑微信小程序的小白,以下是我在学习中的笔记,因为我真的太健忘了... 文章中可能会有错误,但是我会不断的修正的。 持续学习,持续更新... 谢谢浏览,如有错误烦请指正,喵喵喵~ (≧∀≦)ゞ 微信...
  • 字面上讲,小程序就是微信里面的应用程序,外部代码通过小程序这种形式,在微信这个手机 App 里面运行。 但是,更准确的说法是,小程序可以视为只能用微信打开和浏览的网站。小程序和网页的技术模型是一样的,用到...
  • 这个系列的,上一篇教程教大家写了一个最简单的 Hello world 微信小程序。 但是,那只是一个裸页面,并不好看。今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的页面。 所有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,040
精华内容 1,216
关键字:

小程序入门教程