精华内容
下载资源
问答
  • 微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿...

    微信小程序风靡全国已经好多年了,首先是微信小程序,后面百度等多个平台都发布了自己的小程序了,可我还从未尝试过开发一个玩玩,其实对于一个程序员而言,开发一个小程序实在不是什么难事情,所以今天就要聊此心愿,因为在后面的教学中需要用到小程序发布一些作业。废话不多说,下面正式开始我们的微信小程序开发。

    一、准备工作
    1、拥有一个微信公众号
    开发一个微信小程序必须首先拥有一个微信公众号,如果么有公众号,那就去申请吧(不过现在的微信公众号申请貌似比较繁琐,需要耐心)!

    2、进入公众号申请一个小程序
    然后进入微信公众号,在左边的菜单中选择“小程序”即可进入小程序的注册界面,在注册的最后有一个小程序的服务类型选择,如果您是开发着玩,千万别选择医疗、教育等需要上传资质和证件的类型,你知道的很麻烦,如下图
    在这里插入图片描述
    建议选择工具类型,小的类型随便选
    在这里插入图片描述
    3、下载开发工作(IDE)
    在上面菜单中选择工具,下载工具(根据自己的操作系统来选择)
    在这里插入图片描述
    4、安装开发工具
    下载完,我们来安装,安装完成后我们就可以进入我们的程序编写了
    在这里插入图片描述

    二、在IDE中创建小程序获取AppID
    1、创建小程序
    点击完成运行程序,选择左边的小程序,然后在右边点击“+”号进入小程序项目设置,这我么选择默认的设置,先测试一个玩玩。当然,如果你一开始就要来“正经”的,那么锯需要把你以前申请小程序的APPID填写在这里了。
    在这里插入图片描述
    2、获取AppID
    这个微信的AppID号在哪里找呢?还是在微信公众平台的小程序管理页面中,找到开发,进入到开发设置,如下图:
    在这里插入图片描述
    3、运行第一个小程序
    填写好APPID,或者选择测试号直接进入,我们看到额界面不同,需要有云服务支持的app开发,我们后面讲,这里我们还是着重来看看一般的简单小程序怎么开发。
    在这里插入图片描述

    这个时候,我们可以看到编辑器分为左右两部分,左边的就是效果预览,右边的是代码编辑区。这就算是我们第一个微信小程序了。

    要在这个基础上实现更多的功能帮我们需要了解代码编辑部分以及微信小程序的结构。在右边我们可以发现,有pages和utils两个文件夹,而每个文件夹及子文件夹中都有四类文件,js,json,wxml,wxss。这是为什么呢?
    其实有过网页开发经验的童鞋就容易理解,js是脚本,xml是一种扩展标记语言(和HTML类似),xss就是样式文件定义页面格式和配色的。最后需要解释的就是json文件了,这个我们可以看成是一个轻量级数据库文件,本质上就是带有一定格式的数据存储文件。
    在这里插入图片描述
    这么一说,大家就应该都明白了,腾讯公司为了给微信做扩展应用,为了照顾面子没有直接使用xml和xss,而是在前面加了个微信的首字母W,当然,也还为其自身的需要做了些扩展,但最核心的东西没有改变,最无法改变的东西js和json没有改变。

    三、代码修改,实现自己的需求
    1、修改hello world
    了解了这些,我们就可以来看看代码了,这里我们只看几个显而易见的代码行(其实能够清楚的将微信小程序默认的小实例的所有代码看懂,那么我们就可以放手开始正式编写自己的代码了),修改并验证一下这些代码的作用今天这个入门课就算完成任务了。

    首先我们找到hello world的代码,如下图:
    在这里插入图片描述
    我们将其修改为“你好我的第一个微信小程序”
    在这里插入图片描述
    然后点击工具栏中的“编译”,立即可以在预览中看到效果:
    在这里插入图片描述
    2、修改页面获取用户信息
    下面,我们来修改一下获取头像信息的函数,我们改为获取昵称及区域的函数,当我们点击的时候显示微信昵称和地区信息,首先我们将index.wxml中的提示信息修改一下,如图
    在这里插入图片描述
    然后,我们增加为信息部分增加一个用户区域:
    在这里插入图片描述
    编译预览效果:
    在这里插入图片描述
    3、增加自定义函数以及变量
    最后,我们来修改程序文件,为我们的小程序添加一个自定义函数,然后显示在页面中。
    在index.js中增加一个自定义函数myfun,代码如下:
    事先,我们要在page的data中增加一个变量welcomeInfo,
    在这里插入图片描述
    接下来,我们定义并实现这个myfun函数:
    在这里插入图片描述
    4、函数及变量的调用
    然后,不要忘记在page的onload中调用,否则在页面中就无法访问这个welcomeInof变量,调用后welcomeInfo就被赋值了。(我这里放在onload的最后调用的,调用函数的位置可以根据自己的喜好随便放置)
    在这里插入图片描述

    我们在页面中就可以显示出来了:
    在这里插入图片描述
    运行效果如下:
    在这里插入图片描述
    到此为止,我想已经是初步了解了微信小程序的变量定义、函数定义及调用以及最简单的页面显示方法。有关第一个程序中涉及的到setdata以及页面调用自定义函数等内容我们放到《新手尝试编写微信小程序(2)》中来探索。有需求的小伙伴请关注更新!

    展开全文
  • 第一个微信小程序之Hello World

    万次阅读 多人点赞 2018-04-01 22:25:59
    下面我们介绍一下如何开发一个Hello World的小程序。 微信开发者工具下载 访问(https://mp.weixin.qq.com),用小程序账号登录后,按照如下步骤下载微信开发者工具。 1、点击【文档】链接 2、点击【开发】...

    概述


    小程序账号注册完整流程一文中详细介绍了如何注册一个小程序账号。下面我们介绍一下如何开发一个Hello World的小程序。


    微信开发者工具下载


    访问(https://mp.weixin.qq.com),用小程序账号登录后,按照如下步骤下载微信开发者工具。

    1、点击【文档】链接
    2、点击【开发】链接,在弹出的选项中,选择【小程序开发】
    3、点击【工具】的链接
    4、从左边的导航栏中,找到【下载】这个链接
    5、根据自己的操作系统平台,选择合适的版本下载
    

    执行刚下载的

    wechat_devtools_1.02.1803210_x64.exe

    一路next即可。


    使用微信开发工具


    安装完毕后,我们需要使用手机上的微信扫码登录。
    这里写图片描述

    登录成功后,有两种项目可以选择,这里我们选择【小程序项目】

    这里写图片描述

    接着我们需要填写小程序的路径以及APPID。
    这里写图片描述

    路径可以自己指定,APPID可以从【mp.weixin.qq.com】里面的【开发设置】里找到。

    点击确定按钮后,进入小程序开发界面。


    开发Hello World程序


    这里先不介绍小程序的目录结构,直接编写程序。后续的文章再来仔细介绍小程序目录结构。

    首先,先建立app.js和app.json

    app.js

    App({})
    

    app.json

    {
      "pages":[
        "pages/helloworld/helloworld"
      ]
    }
    
    

    然后创建一个pages目录,并在pages目录下创建一个helloworld目录。helloworld目录下存放四个文件。

    helloworld.js
    helloworld.json
    helloworld.wxml
    helloworld.wxss

    四个文件的内容分别如下:


    helloworld.js

    Page({})
    

    helloworld.json

    {}
    

    helloworld.wxml

    <view>Hello World</view>
    

    helloworld.wxss

    view {
      width: 100%;
      height: 50rpx;
      text-align: center;
    }
    

    保存好文件后,就可以看到小程序里可以输出一个

    Hello World

    这里写图片描述

    OK,一个简单的小程序hello world程序就写完了。


    2018 博客之星


    我最近在参与CSDN的博客之星评选,希望您投下宝贵的一票,多多支持我继续写博客,谢谢。

    CSDN 2018博客之星,需要您投上宝贵的一票

    展开全文
  • 大家好,最近微信小程序在经过前两年发布之后频繁的更新,现在版本以及各种api已经趋于稳定,因此,具备各功能的api接口以及...那么话不多说,下面进入小程序的基础入门第一天:配置自己的第一个小程序 一、微信...

    大家好,最近微信小程序在经过前两年发布之后频繁的更新,现在版本以及各种api已经趋于稳定,因此,具备各功能的api接口比较少出现整个api接口不能使用或者使用方法意义全部发生改变的情况;
    因此博主将在近期开始分期发布关于小程序开发的一些心得,主要是微信小程序前端界面的使用,一些常用框架主键以及api的使用。

    那么话不多说,下面进入小程序的基础入门第一天:配置自己的第一个小程序
    一、微信小程序账号注册:

    百度搜索微信小程序,下拉找到微信小程序官网

    这里写图片描述
    进入小程序
    这里写图片描述

    这里写图片描述
    这里写图片描述

    按照步骤操作,直到完成小程序操作然后下载微信小程序编译器

    这里写图片描述
    这里写图片描述
    这里写图片描述

    注册小程序账号是为了里面的appid(前期当然没有也可以)

    这里写图片描述

    注册完成之后,登陆进去,并获取自己的appid

    这里写图片描述

    这里写图片描述

    这里写图片描述

    用自己绑定的微信号登陆

    这里写图片描述

    这里写图片描述

    这里写图片描述

    整个配置过程就完成啦, 大家可以去编辑自己的第一个小程序~~

    展开全文
  • 然后进入第一个小程序的构造:获取用户登陆信息 通过左上角的 “+”添加页面 然后创建第一个功能页面 然后页面构造完成:各部分代码: app.json { &quot;pages&quot;: [ &quot;pages/...

    承接小程序配置之后 ,先对小程序开发软件的界面进行介绍:

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    然后进入第一个小程序的构造:获取用户登陆信息

    通过左上角的 “+”添加页面

    这里写图片描述

    这里写图片描述

    然后创建第一个功能页面

    这里写图片描述

    然后页面构造完成:各部分代码:

    app.json

    {
      "pages": [
        "pages/index/index"
      ],
      "window": {
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "小程序",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light",
        "enablePullDownRefresh": false
      }
    }

    app.js

    App({
    
      /**
       * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
       */
      onLaunch: function () {
    
      },
    
      /**
       * 当小程序启动,或从后台进入前台显示,会触发 onShow
       */
      onShow: function (options) {
    
      },
    
      /**
       * 当小程序从前台进入后台,会触发 onHide
       */
      onHide: function () {
    
      },
    
      /**
       * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
       */
      onError: function (msg) {
    
      }
    })

    index.wxml

    <button open-type='getUserInfo' bindtap='onGetUserInfo'> 获取用户信息</button>

    index.js

    // pages/index/index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
      onGetUserInfo:function(){
        wx.login({
          success:function(res){
            wx.getUserInfo({
              withCredentials:true,
              success:function(res){
                console.log(res);
              }
            })
          }
        })
      },
    
    })

    讲解

    这里app.js 以及app.json的设置是通用的,就不进行讲解了

    讲解一下.index.js以及wxml的作用

    index.wxml中是button 是按钮组件

    bindtap,是绑定点击事件,每次在页面点击就会触发ongetUserinfo事件;
    type-on 是授权管理, 这里要写明是授权js事件中那个行为 ,这里授权的是获取用户信息的行为,即授权ongetUserinfo事件中wx.getuserinfo这个行为

    然后第一个小程序就完成啦~~

    展开全文
  • 个小程序是公司针对一个自家产品的需求,而这产品就是 Discuz (我知道没啥人用了,就不要吐槽了),版本是 X3.2 ,还是 GBK 编码! 在公司给了需求,稍微学习了一下小程序,就直接开干了,网上找到一个基础...
  • 4分钟手把手教你做出第一个微信小程序大家直接通过链接,或者进入到我微信公众号看吧,因为有视频,我就不复制过来了。
  • 【开启征程】打开微信web开发者工具,点击小程序项目:点击右下角的“+”号,将建立快速模板前面的勾去掉然后选择体验小程序,目录随意,点击确定,即可创建一个全空的小程序项目啦。【创建最基本的目录结构和文件】...
  • 使用ollydbg破解第一个小程序

    千次阅读 2015-06-22 16:29:18
    使用ollydbg破解第一个小程序 本文破解的小程序来自《加密与解密》第三版第二章的样例程序,本文的目的在于记录自己学习的过程。 使用的工具有:Ollydbg、TraceMe.exe 1、打开ollydbg,并将TraceMe.exe拖入到...
  • 第一个Java程序

    千次阅读 多人点赞 2019-12-06 19:24:15
    本文关键字:第一个Java程序、HelloWorld、编译、运行。Java语言具有跨平台性的特点,经过Java编译器编译后会产生相应的字节码文件,可以在任意一台安装了jvm(Java虚拟机)的设备上运行。
  • 小程序一个帐户只能有一个小程序。 如果有多个小程序,则需要多帐户。
  • 做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档。...知道了文档的位置,下面我们来介绍下如何做一微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 第一个java小程序HelloWorld

    千次阅读 2017-03-01 11:31:15
    1.打开eclipse 2.新建一工程 3.输入工程名,如“helloworld” ...4.找到“helloworld”工程,找到src,点击右键,新建一java ...6. 编写第一个java程序: package helloworld; public class H
  • 使用Android studio开发第一个小程序

    万次阅读 2018-06-15 17:19:43
    在这里我们只勾选第一个:适配的手机系统最小sdk版本,目前经常用的是API 17。当然你也可以根据自己需要选择合适的版本进行适配。 其他几暂时不勾选,分别是: wear:可穿戴设备(如手环等) tv:电视 [3...
  • 记得七月底回家时候,我老姐说:“哎呀现在这记忆力越来越差了,连你的生日都记不住了”,咱也不知道是真的记忆力退化还是选择性的记忆退化,咱也不敢问啊,所以就有了一个微信小程序的诞生。反正我不管你是不是...
  • 第一步: 微信公众平台注册账号,并选择小程序,网址:mp.weixin.qq.com 填写相关信息,如:主体类型(个人或者企业)        AppID 在开发中都是用的到的,服务器域名在网络请求也是用的到的。 完成信息...
  • 小程序的tabBar不显示,搜索出好多讲list第一个必须是pages第一个,可是和需求不匹配,研究发现,tabBar不显示并非因为此,而是因为带有tarBar的页面跳转必须用wx.switchTab,而redirectTo或者navigateTo则不能跳转...
  • 首先不同的微信小程序之间要跳转必须同一个公众号关联。 而一个公众号可关联同一主体的10个小程序,不同主体的3个小程序。  一个小程序可关联最多500公众号。 结果出来了:(10+3-1)*500 = 6000 。 是不是很...
  • 傻瓜式教程“第一个微信小程序

    万次阅读 2016-11-08 13:41:03
    、下载小程序开发工具 登录“微信公众平台”官网,点击小程序中的“开发” 点击“工具” 点击左下角“下载” 根据自己对应的系统下载,我的电脑是windows 64位,所以下载64位 自己选择好要保存的路径,这里我...
  • 微信小程序入口页第一个页面

    千次阅读 2017-06-09 17:33:37
    微信入口第一个页面 其实就是 app.json 里面 的 page 第一个路径。 比如 "pages/index/test/test1" 排在最前面 则 他就是 打开小程序看到的第一个页面。
  • 零基础入门微信小程序开发

    万次阅读 多人点赞 2018-07-03 02:45:07
    本课程是一个系列入门教程,目标是从 0 开始带领读者上手实战,课程以微信小程序的核心概念作为主线,介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展,另外加上开发工具的安装...
  • 微信小程序 默认第一个选中变色

    万次阅读 2018-07-16 14:51:48
    效果图:这里默认第一个选中 点击每不会改变样式 根据index来实现wxml: 页面class有三目运算&lt;view class='box'&gt; &lt;view class='box-container' wx:for="{{list}}" wx:key="...
  • VS2010编写第一个C语言小程序

    万次阅读 多人点赞 2013-09-12 08:35:25
    今天就开始我的第一个C的编程吧~ 1. 如何用visual studio 2010 新建一C程序项目 首先,打开VS2010 ,点击“文件/新建/项目”或者用快捷键“Ctrl+Shift+N”,之后会弹出下面图示:   我们选择黄色着重表示...
  • 如何自己搭建一个小程序(步骤详解)

    万次阅读 多人点赞 2021-03-15 15:53:05
    今天分享一下小程序创建步骤,只要按照步骤操作,不懂技术也能自己搭建一个属于自己的小程序; NO·1 注册公众号 划重点:申请小程序前,建议先注册一个公众号;因为使用已认证过的公众号主体做辅助认证,可以免...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,863,063
精华内容 1,145,225
关键字:

第一个小程序