美文网首页微信小程序
开发微信小程序

开发微信小程序

作者: 若风_412d | 来源:发表于2019-06-14 15:15 被阅读0次

    一开发资料

    其他人写的步骤。
    https://www.jianshu.com/p/ce82dcc923b0
    1.微信公众平台
    https://mp.weixin.qq.com/cgi-bin/loginpage?t=wxm2-login&lang=zh_CN

    1.1开发者文档:官方
    https://developers.weixin.qq.com/miniprogram/dev/framework/

    1。2

    二开始操作

    1.注册账号

    这里注册的是微信公众号。

    公众号和微信号的区别:
    http://kf.qq.com/touch/wxappfaq/181012FjInMV181012MzQnMv.html?platform=14
    微信号:

    IMG_ADA058A5695F-1.jpeg 屏幕快照 2019-06-14 下午3.58.34.png

    共同开发

    微信小程序管理后台只有一个管理员可以登陆,可以同时绑定10个开发者和20个体验者,开发者们可以通过版本管理工具(比如SVN或者Git等)共同开发,但是向微信后台提交代码只能由管理员一人实现

    如果你不是管理员,那么就把微信号发给管理员,让他给你发布权限,就能发布了,而且不用登录账户。下载那个编译软件,只要你有权限就能发布。

    屏幕快照 2019-06-14 下午6.01.22.png

    1. 开发者权限

    顾名思义,这是用来开发需要的权限了。它是指在「微信 Web 开发者工具」中,以该小程序名义进行开发、测试的权限。

    有了这个权限,相应开发者可以到开发者工具中进行小程序的调试、开发,并将代码版本提交至公众平台小程序后台,然后让后台审核发布或者设置为预览版供其他成员浏览、使用、分析等

    需要注意的是,开启「开发者权限」,并不能让该成员登录小程序后台,也不能管理其他成员的开发版本,或是提交版本审核和发布

    [图片上传失败...(image-47a86d-1560563775454)]

    2. 体验者权限

    如果你需要让某个微信用户测试你的小程序代码,但不涉及代码工作,那么「体验者权限」就很合适。

    开通「体验者权限」后,该成员可以在微信中,直接运行你的「体验版」小程序

    需要注意的是,「体验版」与「开发版」、「正式版」都不一样,且需要将某个版本设为体验版,体验者才能使用体验版小程序。

    3. 登录

    有成员经常需要登录后台?你需要为他开启「登录」权限。

    开启后,该成员可以使用小程序用户名、密码,以及自己的微信扫码,进入小程序后台

    不过,「登录」权限仅仅拥有「登录」的作用。如果不授予该成员其他相关权限,那么后台所有配置将不可修改,且后台小程序数据会对该成员隐藏

    相应地,如果没有「登录」权限,即使已授予其他权限,该成员也无法使用自己的微信,扫码验证进入小程序后台。

    4. 数据分析

    老板想要随时掌握小程序的运营数据?没问题,打开「数据分析」权限就好了。

    只要开启「数据分析」权限,相应成员就可以查看小程序的所有运营数据,包括实时访问量、分时 PV、UV,以及用户特征数据等多个维度的所有数据。

    已经拥有该权限的成员,可以在「小程序数据助手」小程序里随时查看小程序的各种数据。但如果希望在电脑上查看相关数据,还需要开启「登录」权限。

    5. 开发管理

    拥有该权限的成员,可以统一查看小程序所有版本,并进行管理

    也就是说,「设为体验版」、「提交审核」、「发布小程序」等操作,都需要成员拥有「开发管理」的权限,且该权限可以管理所有小程序开发者提交的小程序代码。

    开启该权限后,该成员就可以在「小程序开发助手」小程序中,管理、预览各种版本的小程序。

    但如果希望将某个小程序版本设为体验版,或是提交审核、提交发布,那么该成员还需要拥有「登录」权限,且需要在电脑上完成操作。

    6. 开发设置

    有了这个权限,相应成员就可以管理小程序中的服务器域名(白名单)、客服消息推送 webhook、扫二维码进入小程序等设置。

    需要注意的是,该权限不涉及小程序帐户绑定的腾讯云帐户管理

    7. 暂停服务

    小程序服务器宕机,需要紧急暂停服务?给成员开启「暂停服务」权限,他就有权进行紧急暂停服务的操作。

    暂停服务后,用户将无法访问线上版本的小程序,但开发版、测试版仍可以正常使用。在设置「暂停服务」时,小程序成员还可以设置预计恢复时间,便于用户了解小程序的修复进度。

    [图片上传失败...(image-b44cda-1560563775454)]

    8. 解除关联公众号

    有了「解除关联公众号」权限,该成员就可以查看小程序与公众号的关联关系,并直接解除关联。

    9. 腾讯云管理

    如果你的小程序已经关联腾讯云,那么拥有该权限的用户就可以管理这个小程序相关腾讯云帐户及服务器。

    参考步骤:

    2.安装开发工具

    Stable Build 没啥说的下载安装就行了

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

    屏幕快照 2019-06-15 上午10.09.39.png

    3.文件类型

    (我这里精简一下)
    官方文档:
    https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF

    .json:导航条或配置文件

    .WXML :控件添加, 控件包含关系
    英文:WeiXin Markup Language
    构成:由标签、属性等等构成

    .WXSS:控件的大小和位置和颜色

    .js :处理 数据,界面与用户交互, 界面与数据交互。逻辑


    屏幕快照 2019-06-17 下午4.27.22.png

    4全局配置

    屏幕快照 2019-06-17 下午5.00.24.png

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window

    
    {
    "pages": [
    ],
    
     "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "white",
        "navigationBarTitleText": "xxxxx",
        "navigationBarTextStyle": "black"
      }
    }
    

    5页面配置

    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

    6接口

    6.1 生命周期,代码你有
    6.2getApp()

    https://developers.weixin.qq.com/miniprogram/dev/reference/api/getApp.html
    6.3 Page
    https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

    1.js 语法

    var和let和const

    (function() {
      var varTest = 'test var OK.';
      let letTest = 'test let OK.';
    
      {
        var varTest = 'varTest changed.';
        let letTest = 'letTest changed.';
      }
    
      console.log(varTest); //输出"varTest changed.",内部"{}"中声明的varTest变量覆盖外部的letTest声明
      console.log(letTest); //输出"test let OK.",内部"{}"中声明的letTest和外部的letTest不是同一个变量
    }());
    

    https://baijiahao.baidu.com/s?id=1621787284851612777&wfr=spider&for=pc
    个人推荐:
    const 的使用,只用来声明常量,其它情况下一律使用 let 关键字

    this

    https://www.cnblogs.com/huangwentian/p/6854472.html
    谁最终调用函数,this指向谁

    function

    、Javascript引擎在解析javascript代码时会‘函数声明提升’(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函 数表达式,

    fnName();
    function fnName(){
        ...
    }
    //正常,因为‘提升’了函数声明,函数调用可在函数声明之前
     
    fnName();
    var fnName=function(){
        ...
    }
    //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
    
    
    var fnName=function(){
        alert('Hello World');
    }();
    //函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数
    function fnName(){
        alert('Hello World');
    }();
    //不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用
    function(){
        console.log('Hello World');    
    }();
    //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,
    //所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名
    
    
    
    //这个常用
    function fnName(){
    
    };
    
    

    data

    data这个东西就是一个对象,由this调用。页面里要你自定义的属性都放到这里。

    //初始化
     data: {
        inputValue: ''
          }
    //修改
    this.setData({
          inputValue: "dd"
        })
    //输出
        console.log('xxx',this.data.inputValue);
    
    7控件
    点击

    1》.wxml中

    <button id="submitBtn" bindtap="submitBtnClick">提交</button>
    

    2》在.js中

      submitBtnClick:function(){
    //点击后
    },
    

    3>wxss

    #submitBtn{
      position: fixed;
      top: 292px;
      left: 26px;
      right: 26px;
      color: white;
      background: linear-gradient(to right, #FCAD8D 0%, #F89C83 13%, #EA595B 100%);
      border: none;
      font-size: 16px;
    }
    

    输入框

    <input id="userNameInput" placeholder="请输入真实姓名" placeholder-class="userNameInputPlaceholder" bindinput="userNameInputClick"></input>
    
    

    页面跳转

    wx.navigateTo({
          url: '../checkReaxxxx/checkxxxx',
        })
    

    其他方式
    https://blog.csdn.net/weixin_44217741/article/details/88757767

    相关文章

      网友评论

        本文标题:开发微信小程序

        本文链接:https://www.haomeiwen.com/subject/fvhpfctx.html