2019-05-06 17:27:56 u012717715 阅读数 137

1、微信公众平台上登录你的微信小程序账号(没有账户的点击右下脚--注册小程序) 

需要扫码(绑定的微信必须要绑银行卡)

2、下载工具(点击开发工具)

进入后有基础的工具介绍以及开发文档、工具

 

最后下载完成后双击安装即可

2019-06-16 14:17:59 Scorpion_CG 阅读数 186

注册小程序

首先如果没有账号,在官网按照流程注册账号,注册完成之后直接登录账号,其中信息登记页面选择主体类型为“个人”,填写主体相关资料,并用绑定主体银行卡的微信扫描二维码进行验证,然后“提交”,提交后会弹出警告信息“主体信息一经提交不能进行修改”,确认无误后点击“确认”;

官网上面有详细的流程,按照流程一步一步进行就好

 微信开发工具

从官网下载微信开发工具,打开之后选择小程序项目,如果没有项目,需要自己创建一个,填入自己注册时的APPID,以及创建小程序的目录和项目名称

如果是导入别人的开发项目,是不能够登陆的,所以我们这时候,找到“project.config.json”文件,我们需要修改项目中的“project.config.json”文件。 将其中的APPID这一项,变成我们自己的APPID。

这样我们就可以导入其他人的项目代码了 

2019-06-13 15:00:51 qq_41107410 阅读数 30

起步

  • 申请账号:

    登录微信公众平台,进行账号注册,根据提示一步步地填入相关信息

    • 个人

      个人只能申请一个 appid,一个 appid 对应一个小程序。

    • 企业
      除了个体工商户申请5个 appid 外,其它类型的企业账号都可以申请 50 个 appid。即50个小程序。
      企业认证时需要输入15位营业执照注册号或18位的统一社会信用代码,还需要用绑定了管理员本人银行卡的微信扫描二维码,
      用来验证管理员的身份。认证方式有两种。

      小额打款验证 微信认证
      /
      1-3个工作日
      付申请
      开发者数量 10个

      如果做展示型小程序,可以选择小额打款验证,省下300元审核费用;

      如果涉及到交易,直接选择微信认证,通过微信认证的小程序可以使用更多功能,应用场景更加多样。

  • 安装开发工具:

    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行
    安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

  • 创建第一个小程序:

    选择创建路径,填入申请好的appid。创建快速启动模板,即可进入小程序的开发之中。

编写程序

  • 生命周期

    • 应用生命周期

      应用生命周期就是整个小程序的周期,注册为 APP({})
      onlunch 程序启动 --> onshow <==> onhide

    • 页面生命周期

      单个页面的周期,注册为 Page({}), 是在应用生命周期 onshow 加载之后开始创建的
      onload --> onshow --> onready
      还有一些其他的事件,onpulldownrefresh(监听下拉动作), onreachbottom(监听上拉触底),
      onshareAPPMessage(转发)

  • 代码构成

    可以看到,在创建好的启动模板中,有四种不同的文件类型。
    app 开头的使用于整个应用中,类似于全局变量。

    • JSON配置:

      • 小程序配置 app.json

        app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

      • 工具配置 project.config.json

        针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工
        具的时候,你还要重新配置。

      • 页面配置 page.json

        page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

    • wxml 渲染界面

      类似于 html ,不同于 html 的是,小程序把繁杂的标签归纳为了寥寥几种,常用的为 view,text,button,image等,另外还有开放组件
      map,video,canvas,audio等。大大提高了编写效率。
      页面中数据绑定使用的是{{}},将变量填入双大括号中,当data中的该变量改变时,视图中的数据也会
      随之变动。一些控制语句,如if,eles。在小程序中的表达形式为 wx:if, wx:for 这样。

    • wxss 页面样式

      和css几乎没有差别,小程序新增了一个尺寸单位,rpx 使用该单位的话,在 iPhone6 下看到的样子会
      随着设备的变化自动调整,不需要开发者担心在不同尺寸,不同型号下的样式差异。

    • js 处理逻辑交互
      使用javascript 语言,可以支持es6语法,系统会在编译时将 es6 转化为 es5.
      它的主要作用是调用api,处理数据,响应操作,处理交互等。

  • api 调用

    • 内部 api 调用,一般以 wx. 开头,如获取系统信息 wx.getSysteminfo
    • 外部 api, 基本是通过 wx.request 来进行交互的。其中,url 在开发中可以不进行 https 的校验,但是
      在上线前需要使用有 ssl 证书的域名。一般购买域名都会送一年的证书使用权,到期后在一些域名服务网站上可以
      申请3~6个月不等的证书使用权。
  • openidunionid

    当我们调用用户信息时,只能得到用户昵称,头像,性别,城市等一些变动较大且不唯一的信息。这些显然是不能作为
    唯一标识符。这时,开发者就需要进行深度调用。

    1. wx.login 获取 code 从而得到用户信息:encryptedDataiv ,把这三个参数传给后台
    2. 后台通过 requests.get(https://api.weixin.qq.com/wxa/getpaidunionid?access_token=ACCESS_TOKEN&openid=OPENID ) 返回两个参数 session_keyappid
    3. 使用微信提供的解密文件将 session_keyappid 解密 ,得到深度用户信息。这时的信息中多出了 openid
      unionid .

    openid 用户的唯一标识符。将小程序看成一家店铺的话,openid 就是用户持有的会员卡,它表明用户的唯一性的同时,
    也不妨碍用户在其他店铺持有会员卡。值得一提的是,用户在不同小程序下的 openid 都是不同的,openid 仅仅是一串字符,
    所以用户不需要担心隐私信息的泄漏。

    unionid 。企业账号在得到深度用户信息时会多一个 unionid , unionid 可以绑定多个 openid .只要是同一家企业下的产品,
    openid 不相同,但是都为同一个 unionid 。通俗地说就是,不同的小程序(openid)是一个大公司(unionid)的各个分店,只要用户拥有相同的
    unionid 就可以在该公司旗下的所有分店中进行消费与体验。

  • 支付功能

    支付功能是企业账号特有的一个服务。
    企业账号登录微信公众平台时会多一个微信支付,点击之后可以申请商户号或者绑定商户号,处理完之后登录微信
    商户号,拿到两个参数,支付商户号支付秘钥

    1. 用户点击支付,获取 openid 并传入后台。
    2. 后台将 appid, mch_id,随机字符串, 签名信息交易内容,商户订单号(一般为时间加随机数)金额 等参数通过
      拼接(https://api.mch.weixin.qq.com/pay/unifiedorder)发送到微信进行订单创建
    3. 微信返回一个预支付订单,开发者将里面的 appidprepay_id 取出并添加一个随机字符串 noceStr和当前时间戳 timestap.
      将这4个参数通过 HASH 加密之后得到一个签名 paysign
    4. 将刚才的 时间戳随机字符串prepay_id加密类型 写入支付方法 wx.requestPayment 中。微信将这些信息进行比对
      之后,成功的话便完成了支付。

编译预览

点击预览,开发者就可以通过微信扫码查看在手机端的效果了。只有该项目的管理员和开发者才有权限扫码查看,
所以,如果想具有查看权,需要管理员在微信公众平台将对应用户添加为开发者。

真机调试

手机端渲染数据,开发端进行处理,两者通过网络发送数据。一般真机调试用来操作开发端不具有的能力,
如手机设备调用(蓝牙,wifi),多指触摸,滑动等事件。

上线

  • 提交审核:

    为了保证小程序的质量,以及符合相关的规范,小程序的发布是需要经过审核的。在开发者工具中上传了小程序代码之后,
    登录 小程序管理后台 - 开发管理 - 开发版本 找到提交上传的版本。在开发版本的列表中,
    点击 提交审核 按照页面提示,填写相关的信息,即可以将小程序提交审核。
    需要注意的是,请开发者严格测试了版本之后,再提交审核, 过多的审核不通过,可能会影响后续的时间。

  • 发布:

    审核通过之后,管理员的微信中会收到小程序通过审核的通知,此时登录 小程序管理后台 - 开发管理 - 审核版本。
    中可以看到通过审核的版本。点击发布,既可发布小程序。

  • 客服

    在界面添加一个 button open-type='contact' ,当用户点击该按钮时,会跳转到客服对话界面。
    另一边,管理员需要在微信公众平台指定客服人员,客服人员关注微信小助手并选择要连接的小程序,选择之后便可以查看与
    回复用户的反馈。

  • 推送

    小程序无法像 app 一样对用户推送信息,但是,可以设置模板推送到微信内。

  • 运营数据:

    有两种方式可以方便的看到小程序的 运营数据:

    1. 登录 小程序管理后台 - 数据分析,点击相应的 tab 可以看到相关的数据。
    2. 使用小程序数据助手,在微信中方便的查看运营数据

解决BUG

当小程序的使用人数超过100人之后,便可以申请极速审核,工作日中会在2小时之内完成审核,这样当有 bug 出现时,可以及时修复。
如果没有极速审核权益,问题又比较严重,可以在微信公众平台上选择版本回退,或者暂停服务。

2017-10-20 16:50:58 qq_35713752 阅读数 1363

微信小程序开发交流qq群   581478349

   承接微信小程序开发。扫码加微信。

正文:

 

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择:{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
  </picker>
</view>

 

Page({
  data: {
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {
        id: 0,
        name: '美国'
      },
      {
        id: 1,
        name: '中国'
      },
      {
        id: 2,
        name: '巴西'
      },
      {
        id: 3,
        name: '日本'
      }
    ],
    index: 0,
    multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],
    objectMultiArray: [
      [
        {
          id: 0,
          name: '无脊柱动物'
        },
        {
          id: 1,
          name: '脊柱动物'
        }
      ], [
        {
          id: 0,
          name: '扁性动物'
        },
        {
          id: 1,
          name: '线形动物'
        },
        {
          id: 2,
          name: '环节动物'
        },
        {
          id: 3,
          name: '软体动物'
        },
        {
          id: 3,
          name: '节肢动物'
        }
      ], [
        {
          id: 0,
          name: '猪肉绦虫'
        },
        {
          id: 1,
          name: '吸血虫'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    date: '2016-09-01',
    time: '12:01',
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },
  bindPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
            data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
            break;
          case 1:
            data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
            data.multiArray[2] = ['鲫鱼', '带鱼'];
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1:
        switch (data.multiIndex[0]) {
          case 0:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                break;
              case 1:
                data.multiArray[2] = ['蛔虫'];
                break;
              case 2:
                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                break;
              case 3:
                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                break;
              case 4:
                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                break;
            }
            break;
          case 1:
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = ['鲫鱼', '带鱼'];
                break;
              case 1:
                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                break;
              case 2:
                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        console.log(data.multiIndex);
        break;
    }
    this.setData(data);
  },
  bindDateChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

 

 

 

 

 

2019-05-28 20:23:21 yzx0xyz 阅读数 424

小程序的出现已经有些日子了,微信最先提出,也最为成熟,随着支付宝、字节跳动、百度等各家平台相继跟进,这个圈子也越来越热闹了。

平台政策

微信方面起步早,发展得比较完备一些,邮箱+实名认证过的(绑定银行卡的)微信即可申请开发者账号,编码、预览、真机调试、上传、提审、上架 整个流程都比较流畅,审核也比较迅速,基本当天或隔天就会出结果。
在特殊类目/领域/行业,微信也有专门政策,比如点餐平台,要求小程序运营主体必须自己拥有《增值电信业务经营许可证》等资质。

支付宝是跟随发展的,力度方面要谨慎得多,个人开发者要经过申请公测,通过后才能开始体验。在接口访问上也有诸多限制,比如个人开发者没有调用下载文件接口的权限,小程序内不能含有视频内容等。审核速度也慢一些,基本是2个工作日才有结果。有几千人的开发者群,但官方人员并不活跃,多是开发者们自己交流。其小程序开发者工具也不如微信的稳定(比如:模拟器切换Android机型时容易卡死),有待改善。

字节跳动应该是基于前面两者中间的,使用体验上优于支付宝,离微信还有距离。审核政策上,限制较少,分发流量大,小程序获得的曝光机会更多。最大的问题是:目前仅在Android版今日头条上有小程序的正式入口,iOS版虽然可以通过扫描二维码打开小程序,暂无其它入口了。

百度的智能小程序目前只能企业(需提交营业执照等资料)才能申请入驻,没有体验,暂不讲述。

开发与工具

虽然各平台都推出了自己的开发工具和相应的文档,但若真的为各个平台维护一套代码显然难度有点大(比App的两个平台多多了),于是,各种跨平台的解决方案应运而生了,凹凸实验室的Taro应该是这中间的佼佼者,在目前做过的2款小程序中都表现不错,值得推荐。
基于React的Taro:https://nervjs.github.io/taro/docs/README.html

使用Taro开发的微信小程序
宝宝乐学 职场逍遥
使用Taro开发的字节跳动小程序
宝宝爱学 职场逍遥

当然,也有别的方案,比如基于Vue的mpvue: https://github.com/Meituan-Dianping/mpvue 和 uni-app:https://github.com/dcloudio/uni-app

时代背景

App的运营与推广越来越难,基于web的体验又总是差那么一口气,处于两者中间的小程序或许是当下最友好的形式了,直接在各头部平台上运行,它的蓬勃发展,让我们拭目以待吧!

附:

各平台小程序文档
微信小程序:https://developers.weixin.qq.com/miniprogram/introduction/
支付宝小程序:https://docs.alipay.com/mini/introduce
字节跳动小程序:https://developer.toutiao.com/docs/intro/create.html
百度智能小程序:https://smartprogram.baidu.com/docs/introduction/register

微信支付(Yii)

阅读数 776

没有更多推荐了,返回首页